css3学习--css3动画详解一(animation属性）

时间 2019-12-08

标签 css3 css 学习动画详解 animation 属性栏目 CSS 繁體版

原文原文链接

***介绍的属性并不彻底，写的都是我认为容易混淆的难点属性，因此属性会在最后综合案例展现~

一.Keyframes介绍：

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

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}
示例：建立一个动画名叫“changecolor”，在“0%”时背景色为red,在20%时背景色为blue，在40%背景色为orange，在60%背景色为green，在80%时背景色yellow，在100%处时背景色为red。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>css3动画</title>
<style>
@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}
</style>
</head> 
<body>
<div>hover颜色改变</div>

</body>
</html>

　　二.设置动画播放方式html

语法规则：css3

animation-timing-function:ease(由快到慢，逐渐变慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

三.设置动画播放方向

animation-direction属性主要用来设置动画播放方向，其语法规则以下：css3动画

animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值：normal、alternate动画

一、normal是默认值，若是设置为normal时，动画的每次循环都是向前播放；spa

二、另外一个值是alternate，他的做用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。code

四.设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。orm

参数：htm

其主要有两个值：running和paused。blog

其中running是其默认值，主要做用就是相似于音乐播放器同样，能够经过paused将正在播放的动画停下来，也能够经过running将暂停的动画从新播放，这里的从新播放不必定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外若是暂停了动画的播放，元素的样式将回到最原始设置状态。

例如，页面加载时，动画不播放。代码以下：

animation-play-state:paused;

五.设置动画时间外属性

animation-fill-mode属性定义在动画开始以前和结束以后发生的操做。主要具备四个属性值：none、forwards、backwords和both。其四个属性值对应效果以下：

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具备forwards和backwards效果

在默认状况之下，动画不会影响它的关键帧以外的属性，使用animation-fill-mode属性能够修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具备这两个效果。

例如：让动画停在最一帧处。代码以下：

 animation-fill-mode:forwards;