【animation动画】

1.动画

动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。

1.1 基本使用

制作动画分为两步：

定义动画 @keyframes
使用(调用)

1.2 @keyframes(关键帧) 定义动画

@keyframes animation{
	0%{
	...
	}
	100%{
	...
	}
}

(1)0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
(2)在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
(3)动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
(4)请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%。

1.3 初步使用

页面一打开，一个DIV将从左移至右。

@keyframes move {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(1400px);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  /* 调用动画 */
  animation-name: move;
  /* 持续时间 */
  animation-duration: 3s;
}

1.4 绕圈

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(1000px);
  }
  50% {
    transform: translate(1000px, 500px);
  }
  75% {
    transform: translate(0px, 500px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: teal;
  animation-name: move;
  animation-duration: 3s;
}

绕着页面转

2.animation-name属性

animation-name属性 用于定义要应用的 动画名称 。
基本语法格式：

animation-name: keyframename | none;

animation-name 属性 初始值为 none ，适用于所有 块元素 和 行内元素 。 keyframename 参数用于规定需要绑定到 选择器 的keyframe的 名称 ，如果值为 none ，则表示不应用任何动画，通常用于覆盖或者取消动画。

3.animation-duration属性

animation-duration属性用于定义整个动画效果完成所需要的 时间，以 秒或毫秒计。
基本语法格式：

animation-duration: time;

animation-duration 属性 初始值为 0，适用于所有 块元素和行内元素 。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何 动画效果 。当值为负数时，则被视为0。

4.animation-timing-function属性

animation-timing-function 用来规定动画的 速度曲线 ，可以定义使用哪种方式来执行动画效果。
基本语法格式：

animation-timing-function:value;

animation-timing-function 包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等常用属性值。
animation-timing-function的常用属性值如下：

5.aniamtion-direction属性

动画是否逆向播放

aniamtion-direction: norma | reverse | alternate | alternate-reverse
1.normal 默认的
2.reverse 从终点运动向起点 终点=>起点
3.alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
4.alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

6.解析 animation-fill-mode

动画结束后状态

aniamtion-fill-mode:forwards | backwards
forwards 保持当前位置
backwards 回到初始位置

7.动画的常见属性

*暂停动画： animation-play-state: pulsed;经常和鼠标经过等其他配合使用
*想要动画走回来，而不是直接跳回来： animation- direction: alternate
*盒子动画结束后，停在结東位置： animation- fill-mode: forwards
————————————————
版权声明：本文为CSDN博主「疯狂的地球人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43742708/article/details/114926809
总结
1、keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
3、用cubic-bezier设置动画的速度曲线，它是由曲线的斜率决定速度的快慢。