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 ...
随机推荐
- 小明系列问题——小明序列(Lis 相距大于d的单调上升子序列)
小明系列问题——小明序列 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tot ...
- 水池数目（DFS）
水池数目 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...
- linux内存操作----kernel 3.5.X copy_from_user()和copy_to_user()
前面的一篇文章中简单的描写叙述了一下内存映射的内容,http://blog.csdn.net/codectq/article/details/25658813,这篇文章作为用户把内存规划好之后,在用户 ...
- LR实战之Discuz开源论坛——登录脚本
脚本业务流:访问Discuz论坛首页——登录论坛——退出论坛.本次使用LoadRunner11版本. 一.录制脚本注意 1.确保Discuz论坛能在服务器运行正常. 2.录制前先试访问Discuz论坛 ...
- ASP.NET中分布式事务的使用
之前发表了一篇事务的存储过程,最近在做项目的时候遇到分布式事务,所有总结一下,跟大家分享和交流一下经验.首先说明为什么要分布式事务呢?先说说我在项目的哪里遇到分布式事务吧,我是在做网站后台开发的时候, ...
- eclipse ldt update resource
http://download.eclipse.org/ldt/releases/milestones/ 百度一下都说是 http://download.eclipse.org/koneki/upda ...
- oracle学习-安装卸载
- ORACLE CHECK CONSTRAINT使用示例（转载） .
看下面的例子: CREATE TABLE temp (age NUMBER(3)); ALTER TABLE temp ADD CONSTRAINT ck_temp_age CHECK ((A ...
- 安装4.x版本的express开发框架
错误版本(未更新前的安装方法,更新后就不是这么安装了,好多网上的教程还是这种方法,所以这里先写明了,旧版这里是可以通过的,但是新版4.x就不行了,请用分割线下边的方法) 本文演示在Linux上安装 ...
- 复习：IPC机制
一.为什么需要IPC机制 当我们开启多个进程的时候,我们有时需要和各个进程进行交互.但是进程间的交互就不能够共享对象(就是进程A中创建了一个对象,进程B中的类或者方法不能够直接使用,需要用到IPC机制 ...