搞清animation/transtion/transform/translate

Posted 2020-12-23 webshare2020

css3动画

animation

使用css3动画需要2步

1. 为指定元素添加animation属性及属性值。各浏览器私有属性在前，通用属性在最后。
2. 使用@keyframes定义动画过程名称。各浏览器私有属性在前，通用属性在最后。

animation定义动画的属性值。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

div
{
    -webkit-animation: myfirst 5s; /* Safari Chrome opera */
    -ms-animation: myfirst 5s; /* ie */
    -moz-animation: myfirst 5s; /* ff */
    animation: myfirst 5s;
}
 
@-webkit-keyframes myfirst /* Safari Chrome opera */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@-ms-keyframes myfirst /* ie */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@-moz-keyframes myfirst /* ff */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

功能

• 可以改变任意多的样式，任意多的次数。
• 使用from,to等同于0%，100%
• 最好使用0% 100%（对浏览器好）

属性

• @keyframes 规定动画
• animation 简写属性 name duration timing-function delay iteration-count direction fill-mode play-state
• animation-name 规定@keyframes的名称
• animation-duration
• animation-timing-function linear|ease|ease-in|ease-out|cubic-bezier
• animation-delay
• animation-iteration-count 动画重复播放的次数
• animation-direction 定义动画在下一周期是否逆向播放 normal|reverse|alternate|alternate-reverse|initial|inherit
• animation-fill-mode 动画不播放时的样式
• animation-play-state 定义动画是否运行或停止 paused|runing

transition

1. ie9及以下不支持。

2. 各浏览器私有属性在前，通用属性在最后。

   // css
   div {

   -webkit-transition: width 2s; /* safari chrome */
   -moz-transition: width 2s; /* ff */
   -o-transition: width 2s; /* opera */
   transition: width 2s;
   width: 200px;
   height: 200px;

   }
   .w {

   width: 300px;

   }
   // html
   <div></div>
   // js
   $(‘div‘).on(‘click‘, function () {

   $(‘div‘).addClass(‘w‘)

   })

功能

• 若触发动画事件后在动画未结束前停止事件会放弃当前动画从此时的状态开始执行停止事件的动画。

属性

• transition-property 设置过渡动画的css属性名称。
• transition-duration 完成过渡动画的时长。
• transition-time-function 过渡动画的速度曲线。
• transition-delay 过渡动画的延迟时间。

transition与animation的区别在于前者只做过渡效果，后者着重做动画效果。若实在分不清就把transition记为过渡。过渡是直线型的，不可以拆线。animation记为动画。动画是可以做很多拆线型的。

transform

div {
    -ms-transform: rotate(30deg); /* ie */
    -webkit-s-transform: rotate(30deg); /* safari chrome opera */
    -moz-s-transform: rotate(30deg); /* ff */
    transform: rotate(30deg);
}

功能

• 给指定元素变换。

属性

• none
• matrix(n, n, n, n, n, n)
• translate(x, y) 2d移动
• translate3d(x, y, z) 3d移动
• translateX(x)
• translateY(y)
• translateZ(z)
• scale(x, y) 2d缩放
• scale3d(x, y, z) 3d缩放
• scaleX(x)
• scaleY(y)
• scaleZ(z)
• rotate(a) 2d旋转
• rotate3d(x, y, z, a) 3d 旋转
• rotateX(a)
• rotateY(a)
• rotateZ(a)
• skew(xa, ya) 2d倾斜
• skewX(a)
• skewY(a)
• perspective(n) 3d透视视图

|transform-origin|变形时的原点位置|center center|x-axis y-axis z-axis; // top left right bottom x% xpx|
|transform-box|定义排版盒子|border-box|fill-box, view-box, inherit, initial, unset|
|transform-type|嵌套元素是怎样在三维空间中呈现的|flat 二维| preserve-3d 三维|

transform是变换（若不理解变换就理解为变形）。translate是移动。是transform的一种属性值。没有动画。transition是过渡。有动画。

---

2018/02/12 by stone