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

标签：function   init   alter   round   scale   rect   select   次数   gre   

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;}
    /*from{background:red}
    to{background: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;}
    /*from{background:red}
    to{background: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;
}

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

标签：function   init   alter   round   scale   rect   select   次数   gre   

原文地址：https://www.cnblogs.com/5huihui/p/11593589.html