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 ...
随机推荐
- DataReader、Table、DataSet和Entity相互转化
public class CommonService { #region DataReader转化 /// <summary> /// 将DataReader转化为Table /// &l ...
- Elon Musk：同一时候颠覆几个行业的科技狂人
在苹果著名的"不同凡想"广告中,赞扬了那些改变世界的疯狂家伙们."他们不喜欢墨守成规,也不愿安于现状","他们改变了事物","他们 ...
- C语言头文件组织
一.全局变量单独编写(很值得借鉴). 一般习惯将不同功能模块放到一个头文件和一个C文件中. 例如是写一些数学计算函数: //mymath.h #ifndef _mymath_H #define _my ...
- js库开发
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 在美国公司架构中，LLC、LLP 和 Corporation 的区别何在？
这个问题,首先需要弄清楚这样一个事实:LLC.LLP.Corporation分别属于三种不同类型的公司实体. 1,LLC (Limited Liability Company)是责任有限公司: 2,L ...
- 介绍一款管理软件Redmine
Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统,据说是源于Basecamp的ror版而来,支持多种数据库,有不少自己独特的功能,例如提供wiki. ...
- 配置Apache2 管理 SVN
软件环境:CentOS-7-x86_64 1.安装 mod_dav_svn 模块 2.在Apache2下增加管理配置,如: cd /etc/httpd/conf.d vim subversion. ...
- C# 添加服务引用。
1,服务引用给的实例(需要一个网址连接) http://192.168.17.131:12170/amtiot.gis.WCF/SpatialAnalysis.svc (类似于这样的一个网址) 在网 ...
- apache 设置
此博客是网站www.beilei123.cn镜像,转载请注明出处. 1.ServerTokens ProdServerTokens Prod 显示“Server: Apache”ServerToken ...
- Python 整理一
---恢复内容开始--- Python (pailen)最近学习这个语言,其实早在几年前学习perl的时候就知道有这个语言了,在讲perl的那本书后面就推荐学习python,并且还附加了二章的入门.当 ...