HTML-CSS-动画

CSS中制作动画效果的三种方式

方法一：过渡（trantition）

trantition是过渡性，一般用于伪类选择器，对元素变化时执行比较简单的动画效果，这些效果就是从元素原始状态到最终状态之前的变化动画。

这个过渡必要的两个属性值 为CSS的属性名以及动画执行的时长，如果一个元素需要有多个属性进行过渡的话，需要在tranition中使用进行分割。如果这些属性都是统一进行变化的话，也可以直接使用all，基本上所有CSS的属性都可以进行过渡，但也有一些属性是没有办法过渡的，这些属性一般来讲就是会直接让元素的本质变化的属性，或者是值是没有办法进行量变的。通过这些来判断这个属性是否可以进行过渡。

方法二：变形（transform）

rotate：旋转

scale：放大缩小

translate：位移

scale：第一个值控制我们X轴方向的大小，即宽度，第二个值控制我们Y轴方向的大小，即高度

特性：放大和缩小的时候不会影响到其他元素的布局

translate：当该属性的值为百分比的时候，它的参照物是该元素自身。即移动距离是自身宽度或者高度的相应百分比。可以配合绝对定位进行 块级元素的水平垂直居中

方法三：动画（animation）