animation和transition得区别

Posted 2021-01-23 yibadejiu

animation 和 transition

具体使用方法简易实例

animation

.box{
            width:100px;
            height:100px;
            backgound-color:red;
            position:absolute;
            top:0;
            right: 300px;
            animation: myanimation 2s ease-in;
            -moz-animation:myanimation 2s ease-in;
            -webkit-animation:myanimation 2s ease-in;
            -o-animation: myanimation 2s ease-in;
}
@keyframes myanimation{
          0% {
                right: 100px;
            }

            20% {
                right: 300px;
            }
    
           100% {
                right: 100px;
            }
}        

　　

transition

.box{
            width:80px;
            height:80px;
            background-color:red;
            position:absolute;
            top:0;
            left:0;
            transition:all 1s linear;
            -moz-transition: all 1s linear;
            -webkit-transition: all 1s linear;
            -o-transition:all 1s linear;
        }
.box:hover{
    top:200px;
    left:200px;
}

 

作用

都是修改元素得属性值从而达到运动效果

都可以设置运动得时间

区别

1.触发方式animation配合@keyframes可以不用触发事件，自动触发动画效果，transition这需要通过:hover和JS配合来触发(一般通过JS触发得就用transition)

2.animation可以通过animation-iteration-coun设置循环次数transition没有只能触发是执行一次

3.animation适合做复杂得动画通过@keyframes设置每一帧，transition只有俩帧开始和结束