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

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：（加速然后减速）

[email protected]规则是创建动画。

.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;}

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