css3动画属性-animation -云博客

css3动画属性-animation

# 前端 2024-05-05 06:45 0 32 来源：云博客

一：动画属性参数的详解

　　简介

　　　　CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。

　　语法

　　　　<‘ animation-name ‘>：检索或设置对象所应用的动画名称
　　　　<‘ animation-duration ‘>：检索或设置对象动画的持续时间
　　　　<‘ animation-timing-function ‘>：检索或设置对象动画的过渡类型
　　　　<‘ animation-delay ‘>：检索或设置对象动画延迟的时间
　　　　<‘ animation-iteration-count ‘>：检索或设置对象动画的循环次数
　　　　<‘ animation-direction ‘>：检索或设置对象动画在循环中是否反向运动
　　　　<‘ animation-fill-mode ‘>：检索或设置对象动画时间之外的状态
　　　　<‘ animation-play-state ‘>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

　　animation

　　　　所有动画属性的简写属性，除了 animation-play-state 属性。

　　animation-name

　　　　规定 @keyframes 动画的名称。就是@keyframes后面跟着的动画名称。

　　animation-duration

　　　　规定动画完成一个周期所花费的秒或毫秒。默认是 0。

　　animation-timing-function

　　　　规定动画的速度曲线。默认是 "ease"。

　　　　常见的动画速度参数：

1. linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0
2. ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
3. ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
4. ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
5. ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6. step-start：等同于 steps(1, start)
7. step-end：等同于 steps(1, end)
8. steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
9. cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

　　animation-delay

　　　　　规定动画何时开始。默认是 0。也即是指动画延时执行时间。

　　animation-iteration-count

　　　　　规定动画被播放的次数。默认是 1。当然，我们可以设置2次，3次，依次递推。还有个无线循环关键字infinite,也即是反复循环播放动画。

　　animation-direction

　　　　规定动画是否在下一周期逆向地播放。默认是 "normal"。当然还有下列值：

1. reverse：反方向运行
2. alternate：动画先正常运行再反方向运行，并持续交替运行
3. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　animation-fill-mode

　　　　规定对象动画时间之外的状态。

1. none：默认值。不设置对象动画之外的状态
2. forwards：设置对象状态为动画结束时的状态
3. backwards：设置对象状态为动画开始时的状态
4. both：设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态。

　　animation-play-state

　　　　规定动画是否正在运行或暂停。默认是 "running"。还有个值paused：暂停。

二：实例

动画实例一：

 1 h2{  2  width:100px;  3  height:100px;  4  background:blue;  5  position:absolute;  6  left:0;top:0;  7  /* 用animation 调用关键帧 */  8  animation:h2Move 3s infinite;  9  } 10 11  .box:hover h2{ 12  /* 鼠标滑过动画暂定 */ 13  animation-play-state:paused; 14  } 15 16  /* 制定关键帧 */ 17  @keyframes h2Move{ 18  0%{ 19  left:0;top:0; 20  } 21  25%{ 22  left:700px;top:0; 23  } 24  50%{ 25  left:700px;top:400px; 26  } 27  75%{ 28  left:0;top:400px; 29  } 30  100%{ 31  left:0;top:0; 32 }

动画实例二：

　　结合animation与transform的结合(旋转3D立方体效果)

.box{ width:300px; height:300px; position:fixed; left:0;right:0; top:0;bottom:0; margin:auto; transform-style: preserve-3d; transform:rotateX(20deg) rotateY(30deg); transition:2s; animation: boxMove 5s linear infinite; } @keyframes boxMove{ 0%{ transform:rotateX(0) rotateY(0); } 100%{ transform:rotateX(360deg) rotateY(360deg); } }

源码地址　　https://pan.baidu.com/s/1gnM7VjFgyM1ZU1agPXFKjQ　　提取码：zhqp