争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

css3如何设置动画?css设置容易动画的方法

时间:2023/12/19作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
css3如何设置动画?本篇文章给大家带来的内容是介绍css3设置简单动画的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes “规则”。

animation属性和@keyframes “规则”是css3新增的属性,animation属性可用来给动画设置许多的CSS样式,例如color,background-color, height,或width。【推荐视频学习:css3教程,了解更多css3属性】

我们先通过@keyframes “规则”定义,再在animation属性里调用,就可以实现一个简单的动画效果了。

如下所示:实现背景颜色的不断切换

.element {
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

运行后,背景颜色会不断的进行变化,在#001F3F颜色值到#FF4136颜色值过渡变化,之间也会显示一些过渡的背景色。大家可以自己动手试试效果。

每个@keyframes规则定义了在动画期间中的特定时刻应该发生的事情。例如,0%是动画的开头,100%是结束。然后可以通过速记animation属性或其八个子属性来控制这些关键帧,以更好地控制应如何操纵这些关键帧。

下面我们来看看animation属性的子属性有哪些?有什么作用?

1、animation-name:声明@keyframes要操作的at-rule 的名称。

2、animation-duration:动画完成一个循环所需的时间长度。

3、animation-timing-function:建立预设的加速度曲线,如ease或linear。

4、animation-delay:正在加载的元素和动画序列的开始之间的时间。

5、animation-direction:设置循环后动画的方向。它的默认值在每个周期重置。

6、animation-iteration-count:动画应执行的次数。

7、animation-fill-mode:设置在动画之前/之后应用的值。

例如,我们可以将动画的最后状态设置为保留在屏幕上,也可以将其设置为在动画开始之前切换回。

8、animation-play-state:暂停/播放动画。

然后可以像这样使用这些子属性:

@keyframes stretch {
  /* 在这里声明动画的动作 */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  相同:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

以下是每个子属性可以采用的完整列表:

2.jpg

多个步骤

如果动画具有相同的起始和结束属性,则逗号分隔内部的0%和100%值很有用@keyframes:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

多个动画

我们可以用逗号分隔值以在选择器上声明多个动画。在下面的例子中,我们想要改变圆圈的颜色,@keyframe同时也用另一个方向从一侧到另一侧轻推它。

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

在我们设置动画时,为了让动画效果更自然,实现更多效果,可以和css3的其他属性连用。比如:

1、transform: translate()

2、transform: scale()

3、transform: rotate()

4、opacity

css3动画的兼容性

7.jpg

希望尽可能多地兼容旧版浏览器,我们需要使用一些前缀:

.element {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}
@-webkit-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

总结:以上就是本篇文的全部内容,大大家可以自己动手试试,查看效果,加深理解,希望能对大家的学习有所帮助。

以上就是css3如何设置动画?css设置简单动画的方法的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:css3如何设置动画?css设置容易动画的办法




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版