Question

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

比如我有个文字--"我是李明" 我想让鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原来的位置?
前半部分我已经写完了,就是怎么让他从30px的位置再回来?

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>

Answer 2

如果使用的是animation的话，加一个延时器吧
animation-delay属性，动画延迟多长时间执行
可以在hover的时候执行两个动画，其中一个延迟到第一个执行完之后再执行试一下
或者在一个动画中在写keyframes动画帧的时候，把两个动画帧分开，例如
keyframes anima{
0%{}//执行第一个动画
50%{}//第一个动画执行完成
70%{}//百分之七十的时候再执行第二个动画
100%{}
}