认识CSS动画

CSS动画有两种

transition
关键帧动画 animation

开发周期端，增加网页的趣味性，增加用户体验

transition的特点是需要一个类的触发，animation可以直接动画效果。动画经常和transform配合使用。

兼容性

动画效果

IE10 (2012-09-04)
Chrome4 （2010-01-25)
Firefox5 (2011-01-25)

动画事件

IE10 (2013-10-17)
Chrome4 （2010-01-25)
Firefox5 (2011-01-25)

Transition

基础语法

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transition-property 属性名
transition-duration 动画的时间
transition-timing-function 动画效果时间函数，决定动画的阶段速度
transition-delay 延迟，几秒后开始动画

详细参考 ->定义过渡

语法例子：

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

// 单个属性
transition: background 1s linear 0s;

// 多个属性
transition:  background 1s linear 0s,
             front-size 1.5s ease-in;

transition 的使用依赖于某个class状态或者类似于 :hover 这样的状态。

不同的class下描述了样式的特点，当 transition 标记了一个属性，以hover为例：

#demo {
  position: relative;
  font-size: 14px;
}

#demo:hover {
  transition: font-size 4s ease 0s;
  font-size: 36px;
}

当#demo 被 :hover时，浏览器会切换所有的属性状态，一般浏览器对于各个属性的切换是瞬间完成的，但是transition标记的属性，就会从之前状态到目标状态有一个动画过渡。

这里如果移除鼠标，他会突然切换回 #demo状态。如果像下面这样，给#demo也增加transition，那么当鼠标移出的时候，字体也是一个过渡效果。

#demo {
  position: relative;
  font-size: 14px;
  transition: font-size 4s ease 0s; // 新增
}

#demo:hover {
  transition: font-size 4s ease 0s;
  font-size: 36px;
}

transition是一个一次性的关于属性的过渡动画。可以把不同的class理解为元素的不同状态。而 transition就是在这不同状态之间，提供一个过渡动画。

所以transition的场景，就是不同状态之间的过渡动画。提供一个好的用户体验。

复杂的动画需要借助关键帧动画。

transition-timing-function

参考 -> transition-timing-function

贝塞尔曲线

贝塞尔曲线:

ease
ease-in
ease-out
ease-in-out
cubic-bezier(, , , )

参考:

steps 函数

steps步进函数将过渡时间划分成大小相等的时间时隔来运行

steps(<integer>[,start | end]?)

<integer>:用来指定间隔个数(该值只能是正整数) 第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持

参考: 深入理解CSS过渡transition

transitionend

详细参考 transitionend

transitionend 事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的transition-property 属性，事件将不会被触发.如在transition完成前设置 display 为”none”，事件同样不会被触发。

通过对具体dom监听动画完成，在回调中再继续给某个元素增加类来触发新的动画。可以实现一个动画队列。

transition经常和 tranform一起工作，顺便介绍下transfrom：

编程实践

steps的时间适合做时间指针,比如做钟的动画
transition可以提供按钮的变化
transition也可以做轮播图,其中图片使用transformX

Animation

写法和transition有相同配置的项目。但是提供了更强的功能

播放次数控制
播放方向
停止播放的状态，是否暂停

并且可以无限循环。满足更加复杂的需求。

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

参考 ->animation

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

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

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

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

新增属性说明

animation-iteration-count属性主要用来定义动画的播放次数。

语法规则：

animation-iteration-count: infinite

[, infinite

1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。

2、如果取值为infinite，动画将会无限次的播放。

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

animation-direction:normal

alternate [, normal

alternate]*

其主要有两个值：normal、alternate

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

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

这是一个摆荡的动画效果

参考：

CSS3教程 Keyframes介绍

animation-fill-mode

CSS 属性 animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。

语法

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

参考

transform

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

在 transition和animation动画的时候,涉及到 x,y,z的变换,可以使用transform而非长宽高，transform可以使用GPU加速。

-> transform

transform-origin

transform-origin CSS属性让你更改一个元素变形的原点。

-> transform-origin

语法

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

transform-style

transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

transform-style

工具参考

贝塞尔曲线

Mark24

CSS之动画

认识CSS动画

兼容性

动画效果

动画事件

Transition

基础语法

transition-timing-function

贝塞尔曲线

steps 函数

transitionend

编程实践

Animation

新增属性说明

animation-iteration-count属性主要用来定义动画的播放次数。

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

animation-fill-mode

transform

transform-origin

transform-style

工具参考

参考