Question

css3里怎么使hover先后执行两条动画

Answer 1

下面两种效果 ，一种是鼠标移走后回原位，一种是鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原位
<div class="demo1">我是黎明</div>
<div class="demo2">我是黎明</div>
<style>
.demo1{transition: 1s;}
.demo1:hover{margin-left:30px;}
.demo2:hover
{
animation: myfirst 1s;
-moz-animation: myfirst 1s; /* Firefox */
-webkit-animation: myfirst 1s; /* Safari 和 Chrome */
-o-animation: myfirst 1s; /* Opera */
}
@keyframes myfirst{
0% {margin-left: 0px;}
50% {margin-left: 30px;}
100% {margin-left: 0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {margin-left: 0px;}
50% {margin-left: 30px;}
100% {margin-left: 0px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {margin-left: 0px;}
50% {margin-left: 30px;}
100% {margin-left: 0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {margin-left: 0px;}
50% {margin-left: 30px;}
100% {margin-left: 0px;}
}
</style>