|
https://blog.csdn.net/u011558902/article/details/52442390
transform和@keyframes动画的区别
@keyframes动画是循环的，而transform只执行一遍
@keyframes
CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。
承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器
- 创建动画的原理是将一套CSS样式逐渐变化为另一套模式
- 通过@keyframes规则，您能够创建动画
- @keyframes定义一个动画，并定义具体的动画效果，比如放大还是位移
- @keyframes它定义的动画并不直接执行，需要借助animation来运转
- 在动画过程中，它能够多次改变这套CSS样式
- 以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%
- 为了获得最佳的浏览器支持，您应该时钟定义0%和100%选择器
语法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|
| animationname | 必需。定义动画的名称。 | | keyframes-selector | 必需。定义动画的名称。 合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同） | | css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
transform
含义：改变，使…变形；转换
- rotate()
- skew()
- scale()
- translate()
transform的属性包括:rotate()旋转/skew()倾斜/scale()比例/translate()位移,分别还有x、y之分，比如：rotatex()和rotatey()，以此类推
各个属性的用法
- transform:rotate():旋转；其中10deg表示10度
transform:rotate(10deg)
transform:skew(20deg);
- transform:scale() “1.5"表示以1.5的比例放大，如果要放大2倍，须写成"2.0”，缩小则为负"-"
transform:scale(1.5);
- transform:translate() 如下表示向右位移120像素，如果向上位移，把后面的"0"改个值就行，向左向下位移则为负"-"
transform:translate(120px,0);
综合在一起:(效果是动态)
transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0)
|