css3动画之animate
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
语法：div{animation: 动画名称 一个周期播放时间 速度曲线 延迟时间 下个周期是否逆向}
@keyframes 动画名称{
from{
//do something
}
to{
//do something
}
}
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画，动画播放的执行函数 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
利用transform的动画效果：
1.translate(x,y) 2d,两点之间移动。还可以分开写translateX(x)只移动X 轴的值。translateY(y)只移动Y轴。 2.scale(x,y) 缩放效果 3.rotate(angle) 旋转效果，单位是deg(度) 4.skew(x-angle,y-angle) 倾斜转换
@keyframes move{
from{
transform: translateX(0px);
}
to{
transform: translateX(1000px);
}
}
水平旋转：
@keyframes move{
from{
transform: rotate(180deg);
}
to{ transform: rotate(180deg); }
}
垂直旋转：
@keyframes move{
from{
transform: rotateY(180deg);
}
to{ transform: rotateY(180deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片播放Demo</title> <style>
.animate{
width:100px;
height:100px;
background:red;
position:absolute;
animation: move .6s infinite alternate;
}
@keyframes move{
from{
transform: rotateY(180deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="animate"></div>
</body>
</html>
css3动画之animate的更多相关文章
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- 【转载】css3动画简介以及动画库animate.css的使用
原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
- CSS3动画animation认识，animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animate
CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
随机推荐
- SVN中tag branch trunk用法详解
SVN中tag branch trunk用法详解 2010-05-24 18:32 佚名 字号:T | T 本文向大家简单介绍一下SVN中tag branch trunk用法,SVN中tag bran ...
- 搭建高可用mongodb集群—— 分片
从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的时候能否做到自动扩展? 在系统早期,数据量还小的时候不会引起太大的问题,但是随着数据量持续增多,后续迟早会出 ...
- SQL判断是否存在符合某条件的记录
IF EXISTS ( --判断是否存在合符条件的记录 ) FROM [DCL].[SecurityUser] WHERE [UserAccount] = @UserAccount ) BEGIN - ...
- 如何安装chrome扩展，以json-handle
读取本地json文件 chrome插件安装 方式一,在线安装 直接插到json-handle地址,添加即可 https://chrome.google.com/webstore/detail/json ...
- 使用一个HttpModule拦截Http请求，来检测页面刷新(F5或正常的请求)
在Web Application中,有个问题就是:“我怎么来判断一个http请求到底是通过按F5刷新的请求还是正常的提交请求?” 相信了解ASP.NET的人知道我在说什么,会有同感,而且这其实不是一个 ...
- js 行列操作
function insertRow() { var tbl = document.getElementById("tbCarModel"); var rowLen = tbl.c ...
- bootstrap之 formgroup表单布局样式
<form class="form-horizontal" role="form"> <fieldset> <legend> ...
- Oracle RETURNING INTO 用法示例 .
The RETURNING INTO clause allows us to return column values for rows affected by DML statements. The ...
- ubuntu中vim找不到配色方案blackboard
在ubuntu下启动vim,提示找不到配色方案blackboard(或其他的), 如何挑选自己喜欢的配色方案呢?在/usr/share/vim/vim72/colors中,(这里根据自己的vim版本选 ...
- 21副GIF动图让你了解各种数学概念(转。太强大了)
“让我们面对它:总的来说数学是不容易的,但当你征服了问题,并达到新的理解高度,这就是它给你的回报.” ——Danica McKellar 数学是很难的科学,但因为它是科学家用数学来解释宇宙的语言,我们 ...