css3变形与动画（下）

CSS3动画:

 

1. 关键帧 keyframes

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成

 

使用：以”@keyframes”开头，后面紧跟着是动画名称加上一对花括号”{…}”，括号中就是一些不同时间段样式规则。

 

例：

@keyframes changecolor{

         0%{

             background:red;

}

100%{

         background:green;

}

}

 

注意：

1. 0%和100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式；
2. 0%和100%可以使用关键词from和to来表示。

 

例：

HTML部分

<div>鼠标放到我身上</div>

 

CSS部分：

@keyframes wobble {

  0% {

    margin-left: 100px;

    background:green;

  }

  40% {

    margin-left:150px;

    background:orange;

  }

  60% {

    margin-left: 75px;

    background: blue;

  }

  100% {

    margin-left: 100px;

    background: red;

  }

}

div {

  width: 100px;

  height: 100px;

  background:red;

  color: #fff;

}

div:hover{

  animation: wobble 5s ease .1s;//调用动画；

}

 

 

1. 调用动画 animation

 

子属性：

1）animation:animation-name;(调用动画)

2）animation-duration (动画播放时间)

3）animation-timing-function (动画播放方式)

4）animation-delay (动画开始播放时间)

5）animation-iteration-count  （动画播放次数）

   两个参数值：

   infinite(无限)；n(具体次数)

6）animation-direction (动画播放方向)

   两个参数值：

   normal 每次循环都是向前播放；

   alternate 奇数次向前播放，偶数次反方向播放；

7) animation-play-state （动画播放状态）

   两个值：running & paused

   running类似于音乐播放器，paused是将播放的动画停下来；

   running将暂停的动画重新播放，是从暂停位置开始播放，另外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。

8) animation-fill-mode （动画时间外属性）

   四个属性值：

   none：默认，动画按预期进行，在动画完成最后一帧时，会反转到初始帧；

   forwards：动画结束后应用最后的关键帧；

   backwards：元素应用动画样式是迅速应用动画的初始帧，主要体现在动画开始之前；

   both：同时具有forwards和backwards的效果，即开始前会应用初始帧，结束后会继续应用最后的关键帧；

 

 

 

例：

HTML部分：

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

 

CSS部分：

@keyframes around{

  0% {

    transform: translateX(0);

  }

  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:around;//调用的动画的名称；

  animation-duration: 10s;//动画播放时间；

  animation-timing-function: ease;//动画播放方式；

  animation-delay: 1s;//动画开始播放时间；

  /*animation:around 10s ease 1s;*/

  animation-iteration-count:infinite;//动画播放次数：无限播放；

}