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 起的名字aroundanimation-duration: 10s;              //指定完成过渡所需的时间为10秒animation-timing-function: ease;      //指定过渡函数为easeanimation-delay: 1s;                  //指定开始出现的延迟时间是1秒animation-iteration-count:infinite;   //动画将会无限次的播放}

解释部分语句：

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

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