css动画语法大全

在网页设计中，CSS动画经常被使用，它可以让我们的页面更生动、有趣。以下是CSS动画语法大全，让我们一起来学习吧！

css动画语法大全

CSS动画的基本语法：

/* 选择器 */
selector {
  /* 过渡效果 */
  transition: property duration easing delay;
  /* 动画效果 */
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

其中，transition表示过渡效果，animation则表示动画效果。

CSS过渡效果的属性：

/* 属性 */
property: value;

/* 过渡时间 */
transition-duration: time;

/* 过渡时间函数 */
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n);

/* 延迟时间 */
transition-delay: time;

/* 过渡属性 */
transition-property: none | all | property1[,property2,…];

在过渡效果中，我们可以设置过渡时间、时间函数、延迟时间和过渡属性。

CSS动画效果的属性：

/* 动画名字 */
animation-name: name;

/* 动画时间 */
animation-duration: time;

/* 动画时间函数 */
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n);

/* 延迟时间 */
animation-delay: time;

/* 动画次数 */
animation-iteration-count: number | infinite;

/* 动画方向 */
animation-direction: normal | reverse | alternate;

/* 结束状态 */
animation-fill-mode: none | forwards | backwards | both;

/* 播放状态 */
animation-play-state: paused | running;

在动画效果中，我们可以设置动画名字、时间、时间函数、延迟时间、动画次数、动画方向、结束状态和播放状态。

使用关键帧：

@keyframes name {
  /* 样式 */
  from {
    property: value;
  }

  to {
    property: value;
  }

  /* 或 */
  0% {
    property: value;
  }

  50% {
    property: value;
  }

  100% {
    property: value;
  }
}

关键帧是定义动画的关键，我们可以通过关键帧来设置动画的样式和属性。

示例：

/* 过渡效果 */
div {
  transition: width 2s;
}

/* 动画效果 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

/* 使用动画效果 */
div {
  animation: move 2s cubic-bezier(.46,.03,.52,.96) infinite alternate;
}

以上代码将会给一个div元素添加过渡效果和动画效果。

以上就是CSS动画语法的全部内容，希望对大家有所帮助！

相关推荐