css动画和JavaScript动画

CSS动画是指在网页中通过CSS实现的各种动画效果，其中包括改变位置、大小、颜色等元素的状态。CSS动画的初始状态也是可以通过调整CSS属性来改变的，这样可以让动画更加具有个性化的效果。

在CSS中，可以使用一些关键字来定义动画的初始状态。其中，常用的有：

animation-delay：定义动画开始前的停顿时间；
animation-direction：指定是否交替反向播放动画；
animation-fill-mode：定义动画播放前和播放后的状态；
animation-play-state：用于暂停或播放动画。

举个例子，如果想让一个图片元素从右边滑入屏幕，可以设置以下CSS：

.img {
  animation: slide-in-right 1s ease-out;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

在这个例子中，animation-delay属性设置了0.5秒的停顿时间，animation-fill-mode属性设置了在动画播放前和后，元素的状态都是初始状态，即透明度为0，位置在屏幕右侧。当动画播放时，通过transform属性和opacity属性，让元素从屏幕右侧滑入并逐渐显示出来。

通过修改CSS属性来改变动画的初始状态，可以让动画更加生动有趣，并且更符合设计师的要求。在实际项目中，需要根据具体需求灵活运用这些属性和关键字来实现各种动态效果。