CSS动画

CSS动画: 对元素进行移动、缩放、转动、拉长或拉伸——>改变元素的形状、尺寸和位置

2D转换方法
/*
2D转换方法:
        translate(x,y)      x,y坐标的偏移量
        rotate(旋转度数)
        scale(宽度,高度)     缩放
        skew(x轴倾斜度数,y轴倾斜度数)         倾斜
        matrix()            矩阵效果
*/
.div2{
    width: 100px;
    height: 20px;
    background-color:light blue;

    /*坐标偏移量X轴Y轴*/
    transform: translate(100px,100px);
    -webkit-transform:translate(100px,100px); /* safari chrome*/
    -ms-transform: translate(100px,100px);/*IE*/
    -o-transform: translate(100px,100px);/*opera*/
    -moz-transform: translate(100px,100px);/*Firefox*/

    /*transform:rotate(180deg);*/
    -webkit-transform: translate(100px,100px) rotate(180deg);
    /*transform:scale(1,2);*/
    -webkit-transform: translate(100px,100px) rotate(180deg) scale(1,2);
}
3D转换方法
3D转换方法:
        rotateX()
        rotateY()
.div3{
    width: 100px;
    height: 100px;
    background-color:light blue;

    /*transform:rotateX(120deg);*/
    -webkit-transform: rotateX(120deg);}
过渡
/*
过渡:
        transition:                     设置4个过渡属性
        EXP:    -webkit-transition:width 2s,height 2s, transform 2s; 
        transition-property:            过渡的名称
        transition-duration:            过渡效果话费的时间
        transition-timing-function:     过渡效果的时间曲线
        transition-delay:               过渡效果延时多长时间开始执行
*/
.div6{
    width: 100px;
    height: 100px;
    background-color: #d43f3a;
    -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
    transition: width 2s,height 2s,transform 2s;
}
.div6:hover{
    width: 200px;
    height: 200px;

    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);

    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}
动画######
/*
    动画:
        css3的动画需要遵守@keyframes规则
            规定动画的时长
            规定动画的名称
*/
.div4{
    width:20px;
    height:20px;
    background-color:red;
    position:relative;/*相对布局*/
    margin: 0px auto;/*上下  左右*/
                        /*  重复执行  */
    animation:anim 5s infinite alternate;
    -webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
    0%{ background-color:red;    left:0px;     top:0px;   }
    25%{ background-color:green; left:200px;  top:0px;    }
    50%{ background-color:blue;  left:200px;  top:200px;  }
    75%{ background-color:black; left:0px;    top:200px;  }
    100%{background-color:gray;  left:0px;    top:0px;    }
}
@-webkit-keyframes anim{
    0%{  background-color:red;   left:0px;     top:0px;    }
    25%{ background-color:green; left:200px;   top:0px;    }
    50%{ background-color:blue;  left:200px;   top:200px;  }
    75%{ background-color:black; left:0px;     top:200px;  }
    100%{background-color:gray;  left:0px;     top:0px;    }
}

推荐阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,273评论 0 4
  • 2D、3D转换 过渡 动画 多列 2D、3D转换 1.通过CSS3转换,我们能够对元素进行移动、缩放,转动,拉长或...
    雪_晟阅读 140评论 0 0
  • CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...
    teabyii阅读 1,036评论 0 25
  • 要我来理解的话,就是大山被乔装被点亮使她不在仅仅是山,而是更高层面的意义。那是多么美好的一种姓氏啊,峤。 山乔...
    雨嫣是一只长笛喵阅读 485评论 0 2
  • 有些故事讲给懂的人听:如果说童话里都是骗人的,那讲给自己的呢……期盼一个人,比你更懂你自己,因为你总说,常...
    小胖喵阅读 75评论 0 0