CSS的动画特效（animation）

最新推荐文章于 2024-05-23 22:54:35 发布

蓝桉ྀ

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量2.7k

点赞数 3

文章标签：动画 css css3

今天来讲一下css中很实用的一个效果-动画（animation）。

动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。

为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影什么时候开始（animation-delay），播放或者暂停（animation-play-state）。关键帧（@keyframes）就是拍好了供我们调用，所以电影名就是要使用到关键帧。接下来细细讲解每个部分的具体内容：

@keyframes

通过 @keyframes 规则，我们可以创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，我们应该始终定义 0% 和 100% 选择器。这里面0%就是一帧，50%是一帧，100%也是一帧。

最后,请使用动画属性来控制动画的外观，同时将动画与选择器绑定

animationname 必需。定义动画的名称

keyframes-selector	必需。动画时长的百分比
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles 必需。一个或多个合法的 CSS 样式属性

举个栗子：

@keyframes name
{
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;}
}

animation
animation 属性是一个简写属性，用于设置六个动画属性：

1. animation-name                规定需要绑定到选择器的 keyframe 名称
2. animation-duration            规定完成动画所花费的时间，以秒或毫秒计
3. animation-timing-function        规定动画的速度曲线
4. animation-delay                 规定在动画开始之前的延迟
5. animation-iteration-count    规定动画应该播放的次数
6. animation-direction            规定是否应该轮流反向播放动画

@keyframes name
{
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;}
}

1.animation-name 就是需要绑定的@keyframe的名称了。

2.animation-timing-function就是规定动画的速度曲线。默认是 “ease”。

linear           动画从头到尾的速度是相同的
ease           默认。动画以低速开始，然后加快，在结束前变慢
ease-in           动画以低速开始
ease-out       动画以低速结束
ease-in-out       动画以低速开始和结束
cubic-bezier(n,n,n,n)               在 cubic-bezier 函数中自己的值

3.animation-iteration-count 默认为1次，可以填写数字，nfinite 规定动画应该无限次播放。

4.animation-direction 属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。如果把动画设置为只播放一次，则该属性没有效果。
5.animation-duration和animation-delay分别是动画的持续时间和延时播放