动画属性transform和@keyframes属性

transform（Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。）

transform:translate(100px,200px);移动

transform:rotate(45deg);旋转45度

transform:scale(2);围绕中心点放大两倍

overflow:hidden;溢出部分隐藏

transition:all .5s;所有的东西在0.5秒后会发生变化

@keyframes zhuan {
            form{transform: rotate(0);}/*from和0%相同，动画开头*/
            to{transform:rotate(360deg);}/*to和100%相同，动画完成*/
        }
        @keyframes fanzhuan {
            from{transform: rotate(0);}/*from和0%相同，动画开头*/
            to{transform: rotate(-360deg);}/*to和100%相同，动画完成*/
        }

　　注释：

from和0%相同，动画开头
to和100%相同，动画完成


相关

标签