关于css3 animation动画问题。

Question

我本意是让元素延迟1秒再执行，现在遇到的问题是加了延迟后，动画已经在执行完的动画的位置，到延迟时间又执行动画，如果不加动画是正常的，谢谢！

.tree_1{ width:150px;
       height:150px;
         position:absolute;
         animation:tree_1 ease-in-out 2s;
         animation-delay:1s;}
         
@keyframes tree_1{ 
from{ left:-150px;}
to{left:0;}
}    

 
     
     
    
     

Answer 1

.tree_1{ width:150px;
       height:150px;
         position:absolute;
         left:-150px;
         animation:tree_1 ease-in-out 2s;
         animation-delay:1s;
     }    
@keyframes tree_1{ 
from{ left:-150px;}
to{left:0;}
}   

初始位置设置left:-150px;

Answer 2

.tree_1{
  width:150px;
  height:150px;
  background-color:#ff0;
  animation:tree_1 ease-in-out 2s forwards;
  animation-delay:2s;
}
@keyframes tree_1{ 
  from{ transform:translateX(0px);}
  to{transform:translateX(150px);}
}    

<div class="tree_1">
</div>

效果

Answer 3

animation-fill-mode : none | forwards | backwards | both;

none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。