标签：事件 anim bsp abs div hover 方式 技术分享 ansi
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只有俩帧开始和结束
标签：事件 anim bsp abs div hover 方式 技术分享 ansi
原文地址：https://www.cnblogs.com/yibadejiu/p/10032611.html
