CSS3动画(典型模板)

CSS3动画原理：

就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

步骤：

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性

主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性transition-duration:指定完成过渡所需的时间transition-timing-function:指定过渡函数transition-delay:指定开始出现的延迟时间

举例：

HTML：

<div></div>

CSS：

div {  width: 200px;  height: 200px;  background: red;  margin: 20px auto;  transition-duration:.5s;  transition-timing-function: ease-in;  transition-delay:.18s;}div:hover {  width: 400px;  background:blue;}

过度函数解释：

指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

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

举例

    @keyframes changecolor{      0%{       background: red;      }      100%{        background: green;      }    }

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

HTML代码

 <div><span></span></div>

CSS代码

@keyframes around{      0% {        transform: translateX(0px);      }      25%{        transform: translateX(180px);      }      50%{         transform: translate(180px, 180px);       }      75%{        transform:translate(0,180px);      }      100%{        transform: translateY(0);      }    }    div {      width: 200px;      height: 200px;      border: 1px solid red;      margin: 20px auto;    }    div span {      display: inline-block;      width: 20px;      height: 20px;      background: orange;      border-radius: 100%;      animation-name:around;                //在这里要调用keyframes 起的名字around      animation-duration: 10s;              //指定完成过渡所需的时间为10秒      animation-timing-function: ease;      //指定过渡函数为ease      animation-delay: 1s;                  //指定开始出现的延迟时间是1秒      animation-iteration-count:infinite;   //动画将会无限次的播放    }

解释部分语句：

一、animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

二、animation-iteration-count属性主要用来定义动画的播放次数。
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。