CSS3动画效果
动画属性列表
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode animation
1.@keyframes
如果您在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效,必须将动画绑定到某个元素。
例子
.changeColor{
width: 100px;
height: 100px;
background-color: red;
/* 动画效果名称 */
animation-name: changeColor;
/* 动画执行时间 */
animation-duration: 5s;
}
@keyframes changeColor {
/*从哪里开始*/
/* from {background-color: red;} */
/* 到哪里结束 */
/* to {background-color: rgb(255, 230, 0);} */
/* 使用百分比 */
0% {background-color: orangered;}
25% {background-color: rgb(208, 255, 0);}
50% {background-color: rgb(21, 255, 0);}
75% {background-color: rgb(0, 255, 213);}
100% {background-color: rgb(0, 183, 255);}
}
2.控制动画效果的各种属性
animation-name: example;指定执行的动画名字
animation-duration: 2s 属性定义需要多长时间才能完成动画
animation-delay: 2s 属性规定动画开始的延迟时间。
animation-iteration-count: 3 属性指定动画应运行的次数。 “infinite” 使动画永远持续下去
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
1. normal - 动画正常播放(向前)。默认值
2. reverse - 动画以反方向播放(向后)
3. alternate -动画先向前播放,然后向后
4. alternate-reverse - 动画先向后播放,然后向前
animation-timing-function 属性规定动画的速度曲线。
1. ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
2. linear - 规定从开始到结束的速度相同的动画
3. ease-in- 规定慢速开始的动画
4. ease-out - 规定慢速结束的动画
5. ease-in-out - 指定开始和结束较慢的动画
6. cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
animation-fill-mode 属性规定目标元素的样式。
1. none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
2. forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和animation-iteration-count)。
3. backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
4. both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
开始时
结束时保持结束不变