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 ...
随机推荐
- java中return和continue区别
编程语言大多是想通的,当然java也不例外,下面的在其他编程语言也是相同的道理. return与continue的区别 先看代码哦 class demo2 { public static void m ...
- python代码打印行号，文件名
python 获取当前代码行号 import sys print "here is :",__file__,sys._getframe().f_lineno
- H5 视频直播相关技术
一.移动视频直播发展 大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 ...
- Spring 入门 AOP
通过一个小例子演视怎么使用 Spring 现实面向切面编程. 导入 Spring 所需要的包 spring-framework-2.5.6 版需要导入以下包: 1.----- spring.jar 2 ...
- 003 assert简述
- web.xml中<load-on-start>n</load-on-satrt>作用
如下面一段配置,我们再熟悉不过了: 我们注意到它里面包含了这段配置:<load-on-startup>1</load-on-startup>,那么这个配置有什么作用呢? 作用如 ...
- 关于ajax提交的公共接口的一大用处
在项目框架搭建的时候,就写了ajax提交的公共接口,是想统一的日志和处理ajax返回的错误信息. 今天,却又帮我解决了另外一个问题:每次点开某个页面,有一个ajax请求总是会调用两次,于是打开chro ...
- HTML5的结构学习(1) --- 新增的主体结构元素
1.article 元素 解释:代表文档.页面和应用程序中独立的.完整的.可以被独自引用的内容. 主要用途:博客中的文章.评论,贴吧中的帖子,或者独立的插件等. article中可以包含多种元素例 ...
- JQ兼容各种JS库的写法
来自为知笔记(Wiz)
- wordpress函数技巧
1.Loop循环(成功) <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> // t ...