   在写完css3之变形后，感觉一下子对transform的使用清晰了很多，所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能

本文示例中使用到的html结构都是统一的，代码如下：

<style>
#wrapper{
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
margin:100px auto;
}
#rotate{
width: 200px;
height: 200px;
background: orange;
line-height: 200px;
text-align: center;
}
</style>
<div id="wrapper">
<div id="rotate">
            动画特效
</div>
</div>

CSS3中可以实现动画效果的属性有Transition和Animation，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

transition(过渡)

作用：
       通过鼠标单击、获得焦点等事件来平滑地以动画效果改变CSS属性值

语法：transition: property duration timing-function delay
       其中：
       transition-duration: 表示在多长时间内完成属性值的平滑过渡
       transition-timing-function: 表示通过什么方法来进行平滑过渡（具体值后面详细介绍）
       transition-delay: 指定延迟多长时间后开始执行动画
       transition-property: 表示对哪个CSS属性进行平滑动画过渡(可设置为all，则所有属性值变化时均产生动画效果)

拥有过渡效果的CSS属性如下图(即可以作为transition-property的值的属性)：
CSS3之transition和animation动画

在CSS中创建简单的transition过渡效果可从以下三步来实现：
       第一，在默认样式中声明元素的初始状态样式；
       第二，声明过渡元素最终状态样式，比如悬浮状态；
       第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS代码如下：

#rotate{
transition:transform 3s ease-in 0s;
}
#rotate:hover{
-webkit-transform: rotate(45deg);
}

页面效果如下：
CSS3之transition和animation动画

animation(动画)

语法：animations: name duration timing-function delay iteration-count;

其中：

       animation-name: 用来调用在 @keyframes中已经定义好的动画，其名称必须与“@keyframes”定义的动画名称完全一致（区分大小写）；none为其默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

       animation-duration: 用来指定元素播放动画所持续的时间，也就是完成从0%到100%一次动画所需时间
        animation-timing-function: 用来设置动画播放方式（具体值下面详细介绍）

       animation-delay: 用于定义在浏览器开始执行动画之前等待的时间。

       animation-iteration-count: 用来定义动画的播放次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1

       animation-direction:用来设置动画播放方向,其主要有两个值：normal(默认值,每次循环总是向前移动)、alternate(动画播放在第偶数次向前播放，第奇数次向反方向播放)

       animation-play-state:用来控制元素动画的播放状态,其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态

       animation-fill-mode:定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

Keyframes被称为关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

在CSS中创建简单的animation动画效果可以从以下几个步骤来实现：
       第一，在默认样式中声明元素的初始状态样式；
       第二，在需要执行动画的元素样式中添加animation属性；
       第三，在关键帧中声明不同时间段的样式规则

   在写完css3之变形后，感觉一下子对transform的使用清晰了很多，所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能

本文示例中使用到的html结构都是统一的，代码如下：

<style>
#wrapper{
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
margin:100px auto;
}
#rotate{
width: 200px;
height: 200px;
background: orange;
line-height: 200px;
text-align: center;
}
</style>
<div id="wrapper">
<div id="rotate">
            动画特效
</div>
</div>

CSS3中可以实现动画效果的属性有Transition和Animation，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

transition(过渡)

作用：
       通过鼠标单击、获得焦点等事件来平滑地以动画效果改变CSS属性值

语法：transition: property duration timing-function delay
       其中：
       transition-duration: 表示在多长时间内完成属性值的平滑过渡
       transition-timing-function: 表示通过什么方法来进行平滑过渡（具体值后面详细介绍）
       transition-delay: 指定延迟多长时间后开始执行动画
       transition-property: 表示对哪个CSS属性进行平滑动画过渡(可设置为all，则所有属性值变化时均产生动画效果)

拥有过渡效果的CSS属性如下图(即可以作为transition-property的值的属性)：
CSS3之transition和animation动画

CSS代码如下：

#rotate{
animation: wobble 5s ease .1s;
}
@keyframes wobble {
          0% {
margin-left: 0px;
background:green;
}
          40% {
margin-left:150px;
background:orange;
}
          60% {
margin-left: 75px;
background: blue;
}
          100% {
margin-left: 100px;
background: red;
}
        }

页面效果如下：

CSS3之transition和animation动画

timing-function

transition和animation中都一个timing-function属性，该属性值指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，

其主要取值是以下几种函数名：
CSS3之transition和animation动画

秒客网

CSS3之transition和animation动画

transition(过渡)

animation(动画)

transition(过渡)

timing-function

相关文章