web前端|css教程
css3动画,transition,animation,css3
web前端-css教程
本文给大家介绍实现css3动画的transition和animation属性，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
支付公司网站源码,vscode分文件处理,ubuntu桌面太小,tomcat权威目录,安装完sqlite3,简述爬虫解析网页的几种方式,php程序设计模式,福清seo优化策略,采集网站有流量,手机电影网页源码,joomla 瀑布模板lzw
tradition一共以下有4个属性：
realvnc源码,vscode概率,rss ubuntu,修改tomcat登陆端口是通过,mdb转换sqlite,线上网页设计,怎么管理阿里云服务器,大脚插件文件名,前端框架的图片,社会科学爬虫,php可视化开发工具,seo楼,论坛模版网站,查看网页的特效,asp模板 知道,jq 获取页面宽度,教务管理系统源代码,windows 画图程序代码lzw
transition-property 过渡属性
淘客搜索引擎源码,ubuntu 容器 不退出,怎关闭tomcat服务器,python爬虫需求分析,php爬取网站所有内链,seo最快优化lzw
transition-duration 完成动画所需时间，以秒或者毫秒计算
transition-timing-function 规定动画变化速度曲线
transition-delay 是否延时
transition-property 过渡属性
none：没有属性会获得过渡效果
all：所有属性会获得过渡效果
porperty：width,height…
img{ height:15px; width:15px;}img:hover{ height: 450px; width: 450px;}
transition的作用在于指定状态变化所需要的时间。
img{ transition: 1s;}
transition-duration 完成状态过渡的秒或者毫秒
还可以指定transition的变化属性，例如是width变化还是height
img{ transition: 1s height;}
还可以指定多个属性
img{ transition: 1s height, 1s width}
transition-delay 状态变化速度。
指定delay参数，使得height先发生变化，然后在让width发生变化：
img{ transition: 1s height, 1s 1s width}
delay 真正的意义在于指定了动画发生的顺序，使得多个不同的transition可以在不同的时刻发生形成一种动画效果
transition-timing-function 状态变化速度
默认的是逐渐放慢 ease
可能取值有
linear：匀速
easy-in：加速
ease-out：减速
cubic-bezier函数，自定义速度模式
（cubic：立方体的，bezier：贝塞尔曲线 ）
cubic-bezier（, , , ）取值范围0-1
img{ transition-property: height; transition-duration: 1s; transition-delay: 1s; transition-timing-function: ease;}
注意：transition需要明确知道开始状态和结束状态的具体数值才能计算出中间状态。但是transition没法计算出0->auto的状态，那么就不会产生动画效果。类似情况还有display：none->block和background:url(foo.jpg)->url(bar.jpg)的情况。
它有的缺点：
需要事件触发，没法在网页加载时候直接发生
是一次性的，不能重复发生，除非你重复触发它
只能定义开始状态和结束状态，不能定义中间状态
一个transition规则，只能定义一个属性的变化
animation
CSS Animation一共有以下属性：
animation-name 需要绑定到选择器keyframe的名称
animation-duration 完成动画所需时间，以秒或者毫秒计算
animation-timing-function 规定动画的速度曲线
animaton-delay 动画开始之前延时的时间
animation-iteration-count 动画应该播放的次数
animation-direction 是否应该轮流反向播放动画
animation-fill-mode 属性规定动画播放之后其动态效果是否可见
animatoin-play-state 规定动画正在运行还是暂停
iteration-重复
animation-name
animation-duration
首先 设置动画的名称和持续的时长
p:hover{animation: 1s rainbow;}
上面代码表示，当鼠标悬停在p元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。
@keyframs rainbow{0% { background: #c00; }50% { background: orange; }100% { background: yellowgreen; }}
keyframs的写法相当自由
可以用from表示0%，to 表示100%
@keyframs rainbow{from { background: #c00; }50% { background: orange; }to { background: yellowgreen; }}
如果忽略某个状态，浏览器会自动推算
@keyframs rainbow{ 50% { background: orange; }to { background: yellowgreen; }}@keyframs rainbow{to { background: yellowgreen; }}@keyframs rainbow{from, to { background: yellowgreen; }}
浏览器从一个状态到另外一个状态是平滑过渡到，steps函数实现分步过渡
p:hover {animation: 1s rainbow infinite steps(10);}
默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
p:hover{animation: 1s rainbow infinite;}
除了infinite，还可以设置为具体的次数： 3、5
p:hover{animation: 1s rainbow 5;}
animation-fill-mode
动画结束以后会立即冲结束状态回到起始状态，如果想让动画保持在结束状态就要加上animation-fill-mode属性中的forwards
p:hover{animation: 1s rainbow infinite forwards;}
animation-fill-mode 有4种取值
none 不改变默认行为
forawads 动画完成后，保持最后一个属性（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前向后都进行填充
animation-direction
规定了轮流反向播放动画
alternate：动画会在奇数次（1，3，5…）正常播放，偶数次（2,4,6…）反向播放
最常用alternate和revers，浏览器对其他值的支持不佳
总结：
