CSS3中的animation属性

最新推荐文章于 2024-05-13 14:34:46 发布

远方os

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量469

点赞数

分类专栏： CSS3 文章标签： css3 css html5 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45576567/article/details/103621264

版权

CSS3 专栏收录该内容

2 篇文章

订阅专栏

文章目录

animation

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的

animation

它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写：

.animation {
    animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}

@keyframes

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }}//or
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }}

animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。

animation-name

它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：

.animation {
    animation-name: none | IDENT[,none | IDENT]*;
    }

animation-duration

它是用来设置动画的持续时间，单位为s，默认值为0：

.animation {
    animation-duration: <time>[,<time>]*;}

animation-timing-function

和transition-timing-function类似：

.animation {
    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
    }

animation-delay

它是来设置动画的开始时间，单位是s或者ms，默认值为0：

.animation {
    animation-delay: <time>[,<time>]*;
    }

animation-iteration-count

它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：

.animation {
    animation-iteration-count:infinite | <number> [, infinite | <number>]*;
    }

animation-direction

它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

.animation {
    animation-direction: normal | alternate [, normal | alternate]*;
    }

animation-play-state

它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：

.animation {
    animation-play-state:running | paused [, running | paused]*;
    }

总结

关于 CSS3 的动画的三个属性transform、transition、animation我们都介绍完了，让我们回顾一下。transform我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变；transition和animation它们很像 flash 中的补间动画和逐帧动画；transition是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等；animation的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。