JavaScript前端
前言：在CSS3中，动画效果有俩种方式：
种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@keyframes）中元素的属性值来实现复杂的动画效果。
过渡
transition
设置元素当过渡效果，可以实现元素不同状态间的平滑过渡，经常用来制作动画效果。
语法：transition: < property > < duration > < timing-function > < delay > ;
参数：
transition-property 语法
transition-duration 语法
transition-duration: time;
transition-timing-function 语法
理解steps
steps 函数指定了一个阶跃函数
个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
transition-delay 语法
.box {
/* 分别设置多个属性 */
transition: height 1s ease, width 2s linear;
}
1.1 过渡的缺点
transition的优点在于简单易用，但是它有几个很大的局限。
transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有一个开始状态和结束状态。
一条transition规则，只能定义一个属性的变化，不能控制多个属性。
Animation就是为了解决这些问题而提出的。
@keyframes简介
使用animation属性定义CSS3动画需要2步：
（1）定义动画 ；（@keyframes）
（2）调用动画；（animation）
在CSS3中，在使用动画之前，我们必须使用@keyframes规则定义动画。
语法：
我们可以使用@keyframes规则定义动画，但是这样定义的动画并不会自动执行，我们还需要“调用动画”，这样动画才会生效。其实这就跟JavaScript的函数一样，首先必须定义函数，然后只有调用函数，函数才会执行生效。
1.2 动画animation
说明：注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
如果动画合写的语法：animation: name duration timing-function delay iteration-count direction;
关键帧的自由定制案例：
执行多个动画案例：
Transform
transform属性应用于元素的2D或3D转换。字面上就是变形，改变的意思。
这个属性允许将元素进行旋转，缩放，移动，倾斜等。
JavaScript前端 2019-08-10 18:52:26
前言：在CSS3中，动画效果有俩种方式：
种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@keyframes）中元素的属性值来实现复杂的动画效果。
过渡
transition
设置元素当过渡效果，可以实现元素不同状态间的平滑过渡，经常用来制作动画效果。
语法：transition: < property > < duration > < timing-function > < delay > ;
参数：
transition-property 语法
transition-duration 语法
transition-duration: time;
transition-timing-function 语法
理解steps
steps 函数指定了一个阶跃函数
个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
transition-delay 语法
.box {
/* 分别设置多个属性 */
transition: height 1s ease, width 2s linear;
}
1.1 过渡的缺点
transition的优点在于简单易用，但是它有几个很大的局限。
transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有一个开始状态和结束状态。
一条transition规则，只能定义一个属性的变化，不能控制多个属性。
Animation就是为了解决这些问题而提出的。
@keyframes简介
使用animation属性定义CSS3动画需要2步：
（1）定义动画 ；（@keyframes）
（2）调用动画；（animation）
在CSS3中，在使用动画之前，我们必须使用@keyframes规则定义动画。
语法：
我们可以使用@keyframes规则定义动画，但是这样定义的动画并不会自动执行，我们还需要“调用动画”，这样动画才会生效。其实这就跟JavaScript的函数一样，首先必须定义函数，然后只有调用函数，函数才会执行生效。
1.2 动画animation
说明：注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
如果动画合写的语法：animation: name duration timing-function delay iteration-count direction;
关键帧的自由定制案例：
执行多个动画案例：
Transform
transform属性应用于元素的2D或3D转换。字面上就是变形，改变的意思。
这个属性允许将元素进行旋转，缩放，移动，倾斜等。
