CSS动画效果

CSS变形效果

Transform

　　translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移。

　　scale:缩放 大于1放大，小于1缩小。

　　rotate：旋转 单位 deg度 | grad 梯度 |rad 弧度 | turn 转、圈

　　transform-origin:变形中心点 transform-origin:0,0;

 

Transition:

　　transform-property： 属性|all

　　transform-duration： 持续时间

　　transform-timing-funciton：动画类型 linear|ease|ease-in|ease-in-out|step-start|

　　step-end|steps|cubic-bezier

　　transform-delay:延迟时间

CSS动画效果

@keyframes name{

from{ 位置 大小 颜色 透明度 transform }

50%{}

to{}

}

在要应用的样式上加入 animation: name 持续时间 动画类型 过渡方式

重复次数infinite 为无限次 是否有反向动画 alternate为有 forwards定位到最后位置

如：animation: fly1 3s linear infinite alternate forwards;

 

转载于:https://www.cnblogs.com/ZouHongxue/p/7273997.html