CSS

CSS3中调用动画animation-name和animation-duration

字号+ 编辑: Snake 修订: 种花家 来源: 慕课网 2023-09-11 我要说两句(0)

animation-name属性主要是用来调用 @keyframes 定义好的动画。

调用动画animation-name

animation-name属性主要是用来调用 @keyframes 定义好的动画。

需要特别注意:

animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写),如果不一致将不具有任何动画效果。

语法:

animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由 @keyframes 创建的动画名,上面已经讲过了(animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致);

2、none为默认值,当值为 none 时,将没有任何动画效果,这可以用于覆盖任何动画。

注意:

需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀,Firefox加上-moz-。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div><span></span></div>
</body>
</html>

图片14.png

设置动画播放时间animation-duration

animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒

语法规则:

animation-duration: <time>[,<time>]*

取值<time>为数值,单位为秒,其默认值为“0”,这意味着动画周期为“0”,也就是没有动画效果(如果值为负值会被视为“0”)。

案例演示:制作一个矩形变成圆形的动画,整个动画播放时间持续了10s钟。

HTML:

<div>Hover Me</div>

CSS:

@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 100%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
}
div:hover {
  animation-name: toradius;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: .1s;
}

鼠标移入              鼠标移出

图片15.png图片16.png

阅完此文,您的感想如何?
  • 有用

    1

  • 没用

    1

  • 开心

    1

  • 愤怒

    1

  • 可怜

    1

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • 多个高度相同, 属性inline-block的div,有的div没有内容而有的div有内容,有内容的会下沉?

  • 让整个网页全局变成黑白色调的css代码

  • CSS生成内容

  • CSS3外轮廓属性

我要说说
网上嘉宾点评