CSS3 :animation 动画
2024-08-26 12:42:30
CSS3动画分为二部份:
1、定义动画行为:
使用@keyframes定义动画行为,有两种方式:
方式一:仅定义动画起始样式,与动画结束样式
@keyframes (动画行为名称)
{
from {background: red;}
to {background: yellow;}
} @-moz-keyframes (动画行为名称)
{
from {background: red;}
to {background: yellow;}
} @-webkit-keyframes (动画行为名称)
{
from {background: red;}
to {background: yellow;}
} @-o-keyframes (动画行为名称)
{
from {background: red;}
to {background: yellow;}
}
方式二:定义动画进展中的每步样式,百分比表示动画执行的进度百分值
@keyframes (动画行为名称)
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-moz-keyframes (动画行为名称)
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-webkit-keyframes (动画行为名称)
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-o-keyframes (动画行为名称)
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2、定义动画执行方式。
将动画的行为附加到元素上,使其按照此规则执行动画效果,但我们还要给动画设定执行方式,比如什么动画让它多长时间完成,是否循环执行动画等。
动画执行方式语法:
animation: name duration timing-function delay iteration-count direction;
语法中译:
animation:
动画行为名称,在keyframes内定义的名称
动画周期,比如 5s 表示5秒完成此动画一次
动画的速度曲线, linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
动画何时开始,默认值0,立刻播放
动画被播放的次数,默认值1,值infinite 表示一直循环播放
动画是否在下一周期逆向地播放,可选值: normal(默认,不逆向地播放) | alternate(动画应该轮流反向播放)
3、可以通过增加CSS样式:animation-play-state 来控制CSS3动画暂停与播放
animation-play-state: paused | running;
-webkit-animation-play-state: paused | running ;
代码演示:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<style>
a{width:100px;height:30px;display:block;} @keyframes myan{
0% {background:#066;left:20px;top:20px;}
50% {background:#090;left:100px;top:100px;}
100% {background:#093;left:300px; top:300px;}
} #a{
position:absolute;
animation: myan 5s linear 2s infinite alternate;
} #a:hover{
/* 这里使动画停止了 */
animation-play-state:paused;
}
</style>
</head> <body>
<div style="position:relative;margin:50px;width:100px;height:100px;background:#ccc;"> <a href="#" id="a">1111111</a>
</div> </body>
</html>
最新文章
- c#中abstract与virtua、overridel的用法
- IE6-11使用location.href提交时的链接复制到firefox或chrome时出现乱码
- Visio 2007/2010 左侧";形状";窗口管理
- AndroidManifest.xml
- Android 开源库和项目
- 计算机IT求职学习List
- 给jdk写注释系列之jdk1.6容器(6)-HashSet源码解析&;Map迭代器
- ACM——3n+1
- JDK与Apache Tomcat服务器的安装步骤
- bzoj usaco 金组水题题解(1)
- weblogic静默方式创建域
- centos6.5之phpmyadmin安装
- [文章汇总]ASP.NET Core框架揭秘[最近更新:2018/10/31]
- Python编程Day6——元组类型、字典类型、集合
- ant design环境搭建过程中遇到的问题--Windows-dva-cli
- Charles for MAC配置与使用
- [ Windows BAT Script ] 删除某个目录下的所有某类文件
- 20145310《网络对抗技术》Exp6 信息搜集技术
- Java 使用 Dbutils 工具类库 操作mysql
- RequireJS使用小结1——for Effective JavaScript Module Loading