使用animation
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.d1{
background: yellow;
width: 300px;
height: 200px;
position: relative;
left: 300px;
}
.d2{
background: pink;
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
.d1:hover+.d2{
visibility: visible;
animation: run 1s ease-out;
}
@keyframes run{
from{
left: 0;
}
to{
left: 300px;
}
}
</style>
<div class="d1"></div>
<div class="d2"></div>
若結(jié)構(gòu)是兄弟節(jié)點(diǎn)熬苍，則通過+的方式選擇兄弟節(jié)點(diǎn)
若結(jié)構(gòu)是父子節(jié)點(diǎn)稍走，直接通過空格+選擇器的形式實(shí)現(xiàn)
<style type="text/css">
.d1:hover .d2{
visibility: visible;
animation: run 1s ease-out;
}
@keyframes run{
from{
left: -300px;
}
to{
left: 0;
}
}
</style>
<div class="d1">
<div class="d2"></div>
</div>
另外使用動畫animation時(shí)，語法規(guī)則是
animation: name duration timing-function delay iteration-count direction;
@keyframes run{
from{ left:0;}
to{ left: 200px;}
}
或者利用百分比
@keyframes run{
0%{ left:0;}
50%{ left: 200px;}
100%{ left: 0px;}
}
使用transition
<style>
.d2{
background: pink;
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
transition: left 2s;
}
.d1:hover+.d2{
visibility: visible;
left: 300px;
}
</style>
總結(jié)一下animation和transition
1.如果要靈活定制每個(gè)幀柴底，則使用animation
2.如果簡單的使用from to設(shè)置動畫婿脸，用transition
3.如果要使用js設(shè)置動畫屬性，用transition
