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

Posted 2023-03-18

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

下面两种效果 ，一种是鼠标移走后回原位，一种是鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原位
<div class="demo1">我是黎明</div>
      <div class="demo2">我是黎明</div>
      <style>
        .demo1transition: 1s;
        .demo1:hovermargin-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>

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