1. 两者的区别,触发条件不一样,transition一般通过hover和事件等触发,而animation 是立即触发
2. animation可以设定循环次数
3. animation可以很灵活的控制动画
过度transition可以实现简单的动画交互效果
定义**
过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
1、下面面transition:width 2s定义在类名属性中,触发鼠标悬浮时,会触发元素的过渡动画效果,鼠标离开时,也会触发元素的过渡效果
.box{
width:100px;
height:100px;
background:blue;
transition:width 2s;
}
.box:hover{
width:300px;
}
<div class='box'></div>
2.如果transition: width 2s 属性写在hover样式中,鼠标悬浮的过渡动画还是会有,但是鼠标离开时的动画没有了,鼠标离开没有过渡效果,直接回到初始状态
.box{
width:100px;
height:100px;
background:blue;
}
.box:hover{
width:300px;
transition:width 2s;
}
<div class='box'></div>