css3动画属性animation

2024-06-10 13:16:44

一，`animation`属性

1.在css3中定义了新属性animation用于制作动画效果

2.一个完整的动画效果由animation属性和@keyframes动画帧组成。

二，`animation`子属性

1.animation是一个简写属性，包含了其他子属性

（1）animation-name：规定动画名称

（2）animation-duration ：规定动画完整执行的时长

（3）animation-timing-function ：规定动画的执行曲线

（4）animation-delay ：规定动画的开始之前的延迟

（5）animation-iteration-count ：规定动画执行的次数

（6）animation-direction ：规定动画是否应该轮流反向播放动画，默认normal

（7）animation-fill-mode ：规定动画时间之外的状态

（8）animation-play-state ：规定动画是运行还是暂停。

2.注意至少定义animation-name和animation-duration两项 CSS3 动画属性，并将它绑定到某个选择器，否则不会产生动画效果。

三， `@keyframe`规则定义动画帧

1.@keyframes 规则用于创建动画帧。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

2.使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

 div{animation: changeBgColor 2s ease-in-out}@keyframes changeBgColor{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}

四，常用动画库

1.animate.css

五，兼容

1.Safari 和 Chrome 支持替代的 -webkit-animation 属性。Internet Explorer 9 以及更早的版本不支持 animation 属性

css3动画属性animation相关推荐

CSS3动画属性 animation详解（看完就会）
CSS3动画属性 animation 文章包含个人理解错误请指出往期文章 [css高级]变量详解轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
1分钟深入了解CSS3的动画属性animation
拖好久的animation-温馨提示,先看效果,代码附在讲解后上篇说到@keyframe可以定义动画,animation就是将@keyframe所定义好的动画添加在元素身上. animation可以 ...
html animation 属性,CSS3动画属性：动画(animation)
一:动画(animation)的参数详解由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
CSS3动画属性总结
动画的分类: CSS3中的动画分为:transform(平移动画).transition(过渡动画)animation (帧动画)三种. 平移动画属性:transform有如下属性: 1.平移属性:t ...
CSS3 动画属性 - 逆战班
1.transition: 过渡 transition :过渡效果的 CSS 属性的名称完成过渡效果需要多少秒或毫秒速度效果的速度曲线过渡效果何时开始 1)过渡效果的 CSS 属性的名称(一般有 ...
CSS3动画属性之Transition
Transition 属性(过渡动画) Transition 属性是可以让元素从一个状态转换成另一个状态,这就是过渡. 一.前言之前有段时间总是混淆 transition 和 transform 属 ...
css3动画：animation
例: -webkit-animation: myfirst 5s linear 2s infinite alternate; animation: myfirst 5s linear 2s infin ...

最新文章

热门文章