CSS3 animation 动画用法介绍
一、css3 动画是什么
css3动画是使用css3的动画属性,去控制页面元素,让元素从一种样式逐渐变化为另一种样式的效果。
二、css3 animation动画属性
animation主要包含以下属性,具体含义如下:
(一)@keyframes
@keyframes
:定义一个动画,定义的动画名称就是animation-name
属性的值。定义@keyframes规则
,就是用来逐步去改变元素的CSS样式,在动画过程中,可以多次更改CSS样式,指定样式的变化,在这个过程中使用百分比去绘制动画,或使用关键字from
和to
,其中,from
和关键字和%
相同,to
和100%
相同,0%
表示动画开始的样式,100%
表示动画完成的样式。
语法:
@keyframes animationname {
keyframes-selector {css-styles;}
}
具体含义:
案例:
代码如下:
div{width:50px;height:50px;background:red;border-radius:50%;animation-name:mymove;animation-duration:2s;
}@keyframes mymove{0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}
}
(二)animation-name 动画名称
用来规定动画的名称 ,必须与@keyframes规则配合使用,因为动画名称由@keyframes定义
就比如上面的例子
(三)animation-duration 动画完成时间
规定动画完成一个周期所花费的秒或毫秒,默认是 0。仅仅有@keyframe动画规则和需要执行的动画名称,是不足以形成动画的,我们还需要设置一个动画执行所需要的时间,这里就用到了animation-duration属性,上面的案例所展示的时间为两秒钟执行一次。
案例:把 “mymove” 动画捆绑到 div 元素,时长:1秒
div
{width:100px;height:100px;background:red;animation-name:mymove;animation-duration:1s;
}
@keyframes mymove
{from {background:red;}to {background:yellow;}
}
效果:
将动画设置成5s animation-duration:5s
(四)animation-timing-function 动画过渡
设置对象动画的过渡类型,默认是 “ease”。
具体描述如下:
案例:
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
div
{width:100px;height:50px;background:red;color:white;font-weight:bold;position:relative;animation-name:move;animation-duration:5s;margin-bottom:20px;
}
#div1 {animation-timing-function:linear;}
#div2 {animation-timing-function:ease;}
#div3 {animation-timing-function:ease-in;}
#div4 {animation-timing-function:ease-out;}
#div5 {animation-timing-function:ease-in-out;}
@keyframes move
{from {left:0px;background:red;}to {left:300px;background:yellow;}
}
效果如下:
(五)animation-delay 动画延迟时间
设置对象动画的延迟时间,默认是 0
div{width:50px;height:50px;background:red;border-radius:50%;animation-name:mymove;animation-duration:2s;animation-delay:0s;
}@keyframes mymove{0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}
}
当 animation-delay:5s;
设置成 5S后,表示动画将在5秒后延迟执行。
(六)animation-iteration-count 动画播放次数
规定动画被播放的次数,默认是 1。
上面的案例没有定义该属性,所以默认都只执行一遍。
案例:让上面的动画执行三遍 添加如下代码即可
animation-iteration-count:3;
div{width:50px;height:50px;background:red;border-radius:50%;animation-name:mymove;animation-duration:2s;animation-delay:0s;animation-iteration-count:3;
}@keyframes mymove{0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}
}
效果如下:
那如果想要动画无限循环播放呢,只要将animation-iteration-count
的值设为infinite
,即可让动画无限次的执行,也就达到了循环的效果
(七)animation-direction 动画播放方向
规定动画是否在下一周期逆向地播放。默认是 “normal”,正常播放。
属性值有:normal / reverse / alternate / alternate-reverse
具体含义:
html :
<div></div>
css:
div
{width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
animation-iteration-count:1;
animation-direction:normal;
}
@keyframes mymove
{0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
1、
animation-direction:normal;
2、reverse
3、alternate
需要设置一下 animation-iteration-count属性,如果不设置的话,默认是1,动画也就只执行一次,所以需要设置 animation-iteration-count 动画多次执行的情况,下面这个案例是 animation-iteration-count:5,设置执行5次的效果
4、alternate-reverse
与 alternate 动画执行方向相反
(八)animation-play-state 动画状态
设置对象动画的状态 running / paused
案例:
div
{width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:running;}
div:hover{animation-play-state:paused;
}
@keyframes mymove
{from {left:0px;}
to {left:200px;}
}
CSS3 animation 动画用法介绍相关推荐
- html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- CSS3 animation动画,风车旋转、loading、人物走路动画案例
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- ae制h5文字动画_H5案例分享:CSS3 Animation动画
CSS3 Animation动画 一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
- html动画效果停顿几秒,css3 animation动画执行结束,停顿几秒后重新开始执行
要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infi ...
- Android之Animation动画的介绍及用法
Android SDK介绍了2种Animation: Tween Animation(渐变动画):通过对特定的对象做图像变换如平移.缩放.旋转.淡出/淡入等产生动画效果 Frame Animation ...
- CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- Javascript 对 CSS3 animation 动画的流程的简单控制
CSS3的animation是一个好东西,能让页面动画更加纯净流畅,但是之前一扯到动画流程的控制(比如执行完第一个动画后再执行第二个动画在执行某个动作)就有点懵逼 如果是jQuery动画呢,有回调函数 ...
- 一次搞懂 CSS3 animation动画中forwards和both的区别
平时会用 animation 实现动画效果,之前一直没有留意 animation-fill-mode 中 forwards 和 both 动画的区别,今天自己动手实现了一下,终于搞懂了. animat ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
最新文章
- 微信账号,欢迎一起探讨信息、知识、学习和管理!
- 设计上如何避免EMC问题
- 精选文章 什么是跨域?怎么解决跨域问题?
- boost::units模块实现展示信息单元系统
- 计算机操作系统稳定性的因素有哪些,计算机操作系统期末重点复习汇编.docx
- java中为什么设计包装类,Java 中为什么要设计包装类
- HDOJ 2030-汉字统计
- 链表基础操作及其逆置
- python报表自动化系列 - 拆分一个字符串中的数字和字母
- 廖雪峰Git学习 | 笔记五:撤销修改
- matlab 生成噪声信号
- 妈妈见我来了的香港旅游局
- 计算机文化基础—IT概论
- win7原版镜像_小白重装win7旗舰版系统图文教程
- 前端性能指标:白屏和首屏时间的计算
- mybatis parametertype可以不填么
- AsyncTask用法
- 游戏浅谈1-传奇,跑跑卡丁车
- 深入浅出Pairwise 算法
- 7-2 公路村村通 迪杰斯特拉(dijkstra)算法