CSS3 animation动画
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效果时,包括了初始属性,最终属性 ...
随机推荐
- 自旋锁spin_lock和raw_spin_lock【转】
转自:http://blog.csdn.net/droidphone/article/details/7395983 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 临界区Cr ...
- win端git连接私服仓库+上传本地项目+从服务器下载文件到win
win端git连接私服仓库: 1.win端 检查c:/Users/用户/.ssh/目录下是否有config文件(!!!没有任何后缀名).如果没有则新建config文件,然后修改添加如下内容: Host ...
- sudo cd为什么不能够执行
问题描述 我想要cd到/etc/docker,但是它给我一个权限不够的错误,然后,我想到使用sudo cd /etc/docker时,它告诉我sudo: cd:找不到命令. 于是,郁闷的我就去上网找了 ...
- 曹政：CTO这点事
几乎整个互联网行业都缺 CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找 CTO 的需求,嗯,算下来超过两位数了,光最近一个月就有 3 个,而且这三家都是刚拿 ...
- css行高line-height的用法
一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比 ...
- redis使用管道pipeline提升批量操作性能(php演示)
Redis是一个TCP服务器,支持请求/响应协议. 在Redis中,请求通过以下步骤完成: 客户端向服务器发送查询,并从套接字读取,通常以阻塞的方式,用于服务器响应. 服务器处理命令并将响应发送回客户 ...
- python实用技巧 : Filtering os.walk(转)
''' Created on Mar 7, 2010 @author: Diego 需求: 得到某个目录下, 符合过滤条件的文件夹/文件.实现: 将os.walk再次包装. TODO: 不知道本程序的 ...
- api接口思路介绍
现在很流行api了,但各种api做法不一样,下面我整理了一些自己的想法,也是看了各大门户网站开放的api应用想到的,与大家分享分享,高手跳过. API(Application Programmin ...
- 大数据技术之_16_Scala学习_07_数据结构(上)-集合
第十章 数据结构(上)-集合10.1 数据结构特点10.1.1 Scala 集合基本介绍10.1.2 可变集合和不可变集合举例10.2 Scala 不可变集合继承层次一览图10.2.1 图10.2.2 ...
- 12、Flask实战第12天：子域名
什么是子域名,我们的后台管理系统, 比如cms.heboan.com.配置子域名需要用到蓝图技术: 我现在buleprints下面创建一个cms.py 蓝图 from flask import Blu ...