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 ...
随机推荐
- Yougth的最大化（好题，二分查找 0 1分数规划）
Yougth的最大化 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 Yougth现在有n个物品的重量和价值分别是Wi和Vi,你能帮他从中选出k个物品使得单位重量的价 ...
- ModelAndView解析
查看spring的帮助文档得到下面信息: org.springframework.web.servlet Class ModelAndViewjava.lang.Object org.springfr ...
- ARM9嵌入式学习笔记（2）-Vi使用
ARM9嵌入式学习笔记(2) 实验1-1-3 Vi使用 vi创建文件vi hello.c:vi smb.conf-打开文件smb.conf i键-插入模式:esc键-命令行模式::-底行模式: 底行模 ...
- PHP.INI常用设置一览表（持续更新）
在编程的过程中遇到或发现的问题,会持续的更新: 1. 打破var_dump的显示瓶颈 php开发环境里,安装了xdebug模块后,var_dump()输出的结果将比较易于查看,但默认情况下,var_d ...
- Integer to Roman(JAVA)
public String intToRoman(int num) { int[] values={1000,900,500,400,100,90,50,40,10,9,5,4,1}; String[ ...
- Python－windows服务－重启自动化
一. 前言 有了上一篇的“python初学”的基础,咱们就有了python的开发包,有了开发环境IDE,那我们就可以干活了.我的第一个选题就是让我们的windows服务可以按照我们的意愿进行自动重启. ...
- win7+IE11 中开发工具报错occurredJSLugin.3005解决办法
系统环境 win7+IE11 报错描述: Exception in window.onload: Error: An error has ocurredJSPlugin.3005 Stack Trac ...
- oracle使用口令文件验证和os验证
一.Oracle安装之后默认情况下是启用了OS认证的,这里提到的os认证是指服务器端os认证.OS认证的意思把登录数据库的用户和口令校验放在了操作系统一级.如果以安装Oracle时的用户登录OS,那么 ...
- js 函数（function）
<Javascript高级程序设计第三版> 3.7 函数 1. ECMAScript中的函数在定义时,不必指定是否返回值. 2. 位于return语句之后的任何code都永远不会执行.(之 ...
- jQuery的类数组对象结构
Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...