Css动画：
css3动画主要包括Transform、Transition、Animation
区别
transition：允许css的属性值在一定的时间区间内平滑地过渡。需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性。
animation：不需要触发任何时间的情况下也可以显示地随时间变化来改变元素css的属性值，从而达到动画效果
animation
属性
1、animation-name：用来定义一个动画的名称，这边的name必须和@keyframes的name一致
2、animation-duration：指定元素播放动画所持续的时间长，单位为：s，默认值为：0
3、animation-timing-function：动画的播放方式
ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in：（加速），ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)
4、animation-delay：指定元素动画开始的时间，也就是说当改变元素属性值后多长时间开始执行animation效果。单位为：s，默认为：0
5、animation-iteration-count：指定元素播放动画的循环次数，默认为：1，infinite：无限次数循环
6、animation-direction：指定元素动画播放的方向。默认值为：normal，动画的每次循环都是向前播放；另一个值为：alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。
7、animation-play-state：控制元素动画的播放状态。两个值：running和paused，其中running为默认值。
SouthEast (2).jpg
keyframes
关键帧，将指定时间段内的动画划分的更为精细一些
@keyframes animationname { keyframes-selector { css-styles; } }
.animationname:声明动画的名称。
keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 “from” 和 “to”的形式。”from” 和 “to”的形式等价于 0% 和 100%。
!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox /
-webkit-animation:mymove 5s infinite; / Safari and Chrome /
-o-animation:mymove 5s infinite; / Opera */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>1
由于keyframes较难理解，在此用了w3school中的一个案例进行分析@keyframes 规则,具体效果可以点击链接进行查看。
keyframes跟flash类似，每一次的百分比就如同flash中的每一个帧，但是flash是需要每一帧每一帧进行动画效果比拟，而keyframes随时间变化来改变元素css的属性值，百分比是指在动画时间内的百分之多少进行变化。
在此案例中：animation:mymove 5s infinite;设置了动画名称为mymove，所持续时间为5s，无限循环。
则keyframes中的百分比（0%，25%，50%，75%，100%）就对应着（0s，1.25s，2.5s，3.75s，5s）
•当执行到0s时，top:0px; left:0px; background:red;
•当执行到1.25s时，top:0px; left:100px; background:blue;
•当执行到2.5s时，top:100px; left:100px; background:yellow;
•当执行到3.75s时，top:100px; left:0px; background:green;
•当执行到5s时，top:0px; left:0px; background:red;
在整个动画过程中，动画后面的会覆盖前面的属性值。动画结束后样式会回到默认效果。在每一个百分比的css样式会有一个animation渐变过程，让元素达到一种在不断变化的效果。
transition
1、语法
transition是一个复合属性，可设置四个过渡属性，简写方式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property：是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，所有属性改变），indent（某个属性名，一条transition规则，只能定义
一个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效
果】。 链接： css中的能够产生动画的属性列表（transition动画和animation动画适用）
transition-duration ：过渡时间，是用来指定元素转换过程的持续时间，单位为s（秒）或ms（毫秒）
transition-timing-function：时间函数，允许你根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in(加速) 、ease-out（减速）、ease-in-out：（加速
然后减速）、cubic-bezier：（该值允许你去自定义一个时间曲线） 贝塞尔曲线扫盲 工具网站
transition-delay：延迟，指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）
2 、触发方式
伪类触发：:hover : focus :checked :active
js触发：toggleClass
3、以下情况下，属性值改变不能产生过渡效果
background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等，浏览器支持情况
float浮动元素
height或width使用auto值
display属性在none和其他值（block、inline-block、inline）之间变换
position在stativ和absolute之间变换
网友评论