前言:特效无疑是炫酷的一个东西,很多网页中都存在这种特效,这也就是我们今天要看的动画.


目录:


一.动画

所谓的动画是使元素从一种样式逐渐变化为另一种样式的效果,就是通过CSS代码来对我们需要产生特效的元素的样式进行修改。我们会使用到​​keyframes​​来进行动画的操作。

二.keyframes

1.定义：

keyframes:关键帧;格式为:​​@keyframes animationname {keyframes-selector {css-styles;}}​​(animationname为动画起的名称,是必需的),在一个 @keyframes 代码块里，包含着一系列的CSS规则，统称为 keyframes。 ​​​一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式​​​。动画绘制引擎会连贯平滑的实现各种样式间的转换。我们的状态有​​​:一个是动画的起始状态( “from” 代码块) 和终止状态 ( “to” 代码块)或者可以定义百分比来进行动画,0%-100%之间的数值（from为0%，to为100%）,某一个百分比之间的css样式就会在某一过程进行执行​​​

 @keyframes name{
from{}
to{}
}

或者

 @keyframes name{
0%{}
      ...%
100%{}
}

2.绑定事件（animation）：

当然我们定义好动画后并没有结束，我们需要给某一个元素进行动画事件的绑定，否则这个动画就只是个摆设而已，绑定动画我们使用:​​animation​​。

animation：顾名思义为动画的意思，其中的参数有：

参数

解释

name

动画名称,是必需的

duration

动画时间,是必需的

timing-function

运动曲线,有linear、ease、ease-in、ease-ou、ease-in-out、steps（）（步长）

delay

动画开始的时间

iteration-count

播放次数，有infinite（无限循环）

direction

是否反向：alternate-reverse（倒着播放）

fill-mode

起始与结束状态

play-state

播放与暂停

分开写法：

    animation-name: ;
animation-duration: ;
animation-delay: ;
animation-iteration-count: ;
animation-direction: ;
animation-timing-function: ;
animation-play-state: ;
animation-fill-mode: ;

3.复合写法：

annimation:name durtaion timing-function delay iteration-count direction fill-mode play-state;

我们需要注意的一点就是:在动画中name(动画名称)和durtaion(时间)是必需的。

三.举例

我们实现一个div围绕屏幕一周移动的效果:

代码:

<style>
div {
width: 200px;
height: 200px;
background-color: pink;
animation: move 3s linear infinite;
        }

@keyframes move {
0% {
background-color: greenyellow;
            }
25% {
transform: translate(1000px, 0);
background-color: bisque;
            }
50% {
transform: translate(1000px, 500px);
background-color: khaki;
            }
75% {
transform: translate(0, 500px);
background-color: skyblue;
            }
100% {
transform: translate(0, 0);
background-color: cadetblue;
            }
        }
</style>
</head>
<body>
<div></div>
</body>

效果图:

浅谈CSS3动画_动画