CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
- linear 匀速
- ease 开始和结束慢速
- ease-in 开始是慢速
- ease-out 结束时慢速
- ease-in-out 开始和结束时慢速
- steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
- normal 默认动画结束不返回
- Alternate 动画结束后返回
8、animation-play-state 动画状态
- paused 停止
- running 运动
9、animation-fill-mode 动画前后的状态
- none 不改变默认行为
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
- both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
举例：（人物走路动画）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路动画</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img src="data:images/walking.png"></div>
</body>
</html>
动画中使用的图片如下：
CSS3 animation动画的更多相关文章
-
css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
-
css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
-
CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
-
css3 animation(动画)笔记
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
-
css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
-
css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
-
CSS3 animation动画，循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...
-
css3 animation动画使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
关于css3 Animation动画
在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...
随机推荐
-
警告: [unchecked] 对作为原始类型IScheme的成员的write(TProt ocol,T)的调用未经过检查
jdk 从8 改成了7 就好了! 或者, 修改源码, 每个响应的地方加上 surppressingWarnings xxx , 或者使用 请使用 -Xlint:unchecked 重新编译. 参照 h ...
-
Java关键字：static
通常,当创建类时,就是在描述那个类的外观和行为.只有用new创建类的对象时,才分配数据存储空间,方法才能被调用.但往往我们会有下面两种需求: 1.我想要这样一个存储空间:不管创建多少对象,无论是不创建 ...
-
这几天开始，先学习一些 java 基础吧，学的有点累
这几天开始,先学习一些 java 基础吧,学的有点累
-
MongoDB2.6 新特性
MongoDB 2.6 已经在今天发布,当然,关注MongoDB的同志自然知道这个消息. 整个MongoDB2.6,个人觉得认证系统是一个重新设计的系统.当然,MongoDB 2.4.6开始,就已经在 ...
-
38 网络相关函数(六)——live555源码阅读(四)网络
38 网络相关函数(六)——live555源码阅读(四)网络 38 网络相关函数(六)——live555源码阅读(四)网络 简介 12)makeSocketNonBlocking和makeSocket ...
-
U盘中的autorun.inf
怎么删除u盘里的autorun.inf 如果U盘中毒,刚插进机子时按住SHIFT五秒,这样就可以跳过预读,这样防止了预读时把病毒感染到机子上,在U盘盘符上点右键,看看有没有“Auto”选项: 1.如果 ...
-
在服务器端保存ViewState
1.比较 Asp.net 的一个强大的功能就是ViewState, 但是这也成为很多人诟病的地方,我们先来看一个实例 ViewState其中一个特性就是保存页面的状态,下面我们看一个很简单的登录页面 ...
-
[Jobdu] 题目1531：货币面值
题目描述: 小虎是游戏中的一个国王,在他管理的国家中发行了很多不同面额的纸币,用这些纸币进行任意的组合可以在游戏中购买各种装备来提升自己.有一天,他突然很想知道这些纸币的组合不能表示的最小面额是多少, ...
-
Android ListView高度自适应和ScrollView冲突解决
在ScrollView中嵌套使用ListView,ListView只会显示一行到两行的数据.起初我以为是样式的问题,一直在对XML文件的样式进行尝试性设置,但始终得不到想要的效果.后来在网上查了查,S ...
-
图文并茂 RAID 技术全解 – RAID0、RAID1、RAID5、RAID10
RAID 技术相信大家都有接触过,尤其是服务器运维人员,RAID 概念很多,有时候会概念混淆.这篇文章为网络转载,写得相当不错,它对 RAID 技术的概念特征.基本原理.关键技术.各种等级和发展现状进 ...