day13 CSS3动画(animation)

发布时间:2024年01月18日

CSS3 @keyframes 规则

@keyframes 规则是创建动画,在该规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

animation:所有动画属性的简写属性。

animation-name:规定 @keyframes 动画的名称。

animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function:规定动画的速度曲线。默认是 "ease"

animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

animation-delay:规定动画何时开始。默认是 0。

animation-iteration-count:规定动画被播放的次数。默认是 1。

animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"

animation-play-state:规定动画是否正在运行或暂停。默认是 "running"

animation-direction:属性定义是否循环交替反向播放动画。
注意:如果动画被设置为只播放一次,该属性将不起作用。
normal:默认值。动画按正常播放。
reverse:动画反向播放。
alternate:动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
alternate-reverse:动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。

@charset "UTF-8";
body {
  background-color: black;
  color: darkblue;
  font-size: 18px;
}

#ani1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation-name: anione;
  animation-duration: 5s;
  /* animation-delay: 2s; */
  animation-direction: alternate;
  animation-play-state: running;
  animation-iteration-count: infinite;
}

@keyframes anione {
  0% {
    background-color: pink;
  }
  25% {
    background-color: lightblue;
    width: 25%;
  }
  50% {
    background-color: lightgreen;
    width: 50%;
  }
  75% {
    background-color: plum;
    width: 75%;
  }
  100% {
    background-color: lightcoral;
    width: 100%;
  }

}

以下为某一个状态,动态图可以自己看。
该方形元素的背景色会从粉色逐渐过渡到浅珊瑚色,同时宽度从0逐渐增加到100%。动画持续时间为5秒,每次循环播放时会交替反向进行,无限循环。
在这里插入图片描述

文章来源:https://blog.csdn.net/z240113765/article/details/135568126
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。