css3中的属性 变形(transform)过渡(transtion)动画(animation)

Posted 2022-12-05 5huihui

1、transform: 旋转rotate、移动translate、缩放scale、扭曲skew
    transform:rotate(±30deg)  正数：顺时针旋转，负数：逆时针旋转。  旋转
    transform:translate(100px,20px)   translateX translateY   平移
    transform:scale(2,1.5)   scaleX scaleY  缩放
    transform:skew(30deg,10deg)  skewX skewY  扭曲

2、transtion: all 1s ease;
        1、ease：（逐渐变慢）
        2、linear：（匀速）
        3、ease-in：(加速)
        4、ease-out：（减速）
        5、ease-in-out：（加速然后减速）

3.@keyframes规则是创建动画。

.layer1 
　　/*animation:动画名 动画时长；*/
　　animation:myfirst 3s;

　　

@keyframes myfirst
    0%   background: red; left:0px; top:0px;
    25%  background: yellow; left:200px; top:0px;
    50%  background: blue; left:200px; top:200px;
    75%  background: green; left:0px; top:200px;
    100% background: red; left:0px; top:0px;
    /*frombackground:red
    tobackground:yellow*/

@-webkit-keyframes myfirst /* Safari and Chrome*/
    0%   background: red; left:0px; top:0px;
    25%  background: yellow; left:200px; top:0px;
    50%  background: blue; left:200px; top:200px;
    75%  background: green; left:0px; top:200px;
    100% background: red; left:0px; top:0px;
    /*frombackground:red
    tobackground:yellow*/

@keyframes 规则和所有动画属性
@keyframes  规定动画
animation   所有动画属性的简写属性，除 animation-play-state
animation-name  @keyframes 动画名称
animation-duration  动画完成一个周期所花秒或毫秒数。默认是 0
animation-timing-function   动画的速度曲线。默认是 "ease"
animation-delay 动画延迟多久开始。默认是 0
animation-iteration-count   规定动画被播放的次数。默认是 1
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。

div

    animation-name: myfirst;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari and Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;