1. 2d动画
transform属性包括:
平移transform:translate(x,y,z)默认x轴平移,transform:translatey(ypx)表示沿y轴平移y像素。
旋转transform:rotate(x,y,z)默认z轴旋转,transform-origin属性定义旋转中心,transform:rotatex(90deg)表示绕x轴旋转90度。
变形transform:skew(deg)。
伸缩tranasform:scale(width,height),transform:scale(0.5,1.5)表示宽变为原来的0.5倍,高变为原来的1.5倍。
复合属性transform: translate(xpx) rotate(90deg) skew(30deg) scale(0.5 1.5);
2.过渡动画
transition属性(过渡的是元素的属性值)包括:
transition-delay:1s;表示动画延迟一秒开始播放。
transition-duration:1s;表示动画一秒执行结束。
transition-timing-function动画的执行方式:linear匀速 ease-in慢开 ease-in-out慢开慢关。
transition-property:过渡什么属性,过渡多个用逗号分开,过渡所有用all。
复合属性transition:1s 1s linear all;(延迟时间写在执行时间之前)
3.帧动画
animation属性
animation是所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name规定@keyframes动画的名称。
animation-dulation规定动画完成一个周期所花时间。
animation-timing-function规定动画的速度曲线 ,默认ease。
animation-delay规定动画何时开始 默认0。
animation-iteration-count规定动画播放次数 默认1 ,infinite无限次。
animation-direction: alternate;播放方式:奇偶播放。
animation-play-state规定动画是否正在运行或暂停 ,默认running, paused暂停。
animation-fill-mode: forwards;动画停止到完成位置。
4.3d动画
@keyframes属性 ,规定动画。@keyframes tq_rotate{
from{}
to{}
}
复合属性animation: tq_rotate 3s 1s ease infinite;(旋转的延迟时间写在执行时间之后)
5.2d转3d
transform-style: preserve-3d;
css3动画
最新推荐文章于 2024-04-16 00:12:34 发布