css3 transition

作者: 李奕锦liyijin | 来源:发表于2017-10-19 11:16 被阅读0次

transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
需要事件的触发，例如单击、获取焦点、失去焦点等
transition:property duration timing-function delay;
property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform

               duration:持续时间
               timing-function:ease等
               delay:延迟
               注意：当property为all的时候所有动画
        例如：transition:width 2s ease 0s;
        http://www.w3cplus.com/content/css3-transition

CSS transform 属性 , 只对 block 级元素生效！

代码例子：

transition:transform
http://js.jirengu.com/gixozolufe/3/edit

animation:spin 4s;
http://js.jirengu.com/gixozolufe/12/edit

animation:spin 4s infinite;
http://js.jirengu.com/gixozolufe/14/edit

animation:spin 4s linear
http://js.jirengu.com/rokirocisa/2/edit

animation:spin 4s 2;
http://js.jirengu.com/tebubeyire/1/edit

animation:spin 1s infinite linear;
http://js.jirengu.com/jocuxufene/4/

animation:spin 1s alternate;
http://js.jirengu.com/jocuxufene/8/edit?html,css,output

animation:spin 1s infinite linear alternate;
http://js.jirengu.com/jocuxufene/7/edit

animation:spin 1s alternate; 0%-50%-100%
http://js.jirengu.com/jocuxufene/11/edit?html,css,output

综合动画 transition transform rotat scale translate
代码：http://js.jirengu.com/futamaxaju/9/edit?html,css,js
页面：http://js.jirengu.com/futamaxaju/9