animation: name duration timing-function delay iteration-count direction;

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-fill-mode 规定动画播放完毕后,动画定格的动画帧
animation-play-state 动画播放的状态(暂停/播放)

动画名称

持续时间

播放速率与transition一致             其他 可选值:ease  |   linear   |   ease-in   |   ease-out   |   ease-in-out

延迟时间

播放次数                                         其他可选值:infinite   (   无限次  )

动画播放是否反向                        其他可选值:normal(普通) |     reverse(反向) |     alternate(先正向,后反向) |     alternate-reverse(先反向,后正向

播放结束后固定在哪一帧           其他可选值: none(无) |    forwards(结束帧) |    backwards(开始帧) |    both(开始帧或结束帧)

动画播放的状态(暂停/播放)    animation-play-state:  running | paused;

@keyframes   规定动画

animation     所有动画属性的简写属性,除了 animation-play-state 属性。

transition

默认值:transition:all 0 ease 0;

  • transition-property   规定过渡效果的css属性名称。
  • transition-duration   规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function   规定速度效果的速度曲线。
  • transition-delay   定义过渡效果何时开始。
transition-timing-function:
描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

常见  1:translate

transform:translate3d(x,y,z);   3d转换

translate3d(x,y,z)

参数解析:

(1).x:表示在 x 轴方向的位移。

(2).y:表示在 y 轴方向的位移。

(3).z:表示在 z 轴方向的位移。

常见  2:rotate 角度

transform:rotate(7deg);    旋转7度

css 角度单位   deg,grad,rad,turn

deg :   度,一个圆等于360度

grad:   梯度,一个圆有400梯度

rad: 弧度,一个圆共2π弧度

turn:圈,一个圆有一个圈

常见  3:scale 大小比例

transform:scale(1.5);  放大1.5倍

参数解析:

① transform:scaleX(x)

说明: x表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。

② transform:scaleY(y)

说明: y表示元素沿着垂直方向(Y轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。

③ transform:scale(x,y)

说明: x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。

注:Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

常见  4:skew 扭曲变形

transform:skew(1.5);  放大1.5倍

常见  5:matrix 矩阵变形

第一种:fadeIn-动画

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 800px;-webkit-animation: fadeIn 2s ease 0.5s 1 both;}
.item-02{ position: absolute; left: 250px; top: 200px; width: 800px;-webkit-animation: fadeIn 2s ease 0.8s 1 both;}
.item-03{ position: absolute; left: 100px; top: 400px; width: 800px;-webkit-animation: fadeIn 2s ease 1.6s 1 both;}
.item-04{ position: absolute; left: 300px; top: 600px; width: 800px;-webkit-animation: fadeIn 2s ease 2.4s 1 both;}
@-webkit-keyframes fadeIn{
0%{opacity:}
100%{opacity:}
}
@keyframes fadeIn{
0%{opacity:}
100%{opacity:}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}

第二种:fadeInUp-动画

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: fadeInUp 2s ease 1s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: fadeInUp 2s ease 1.5s 1 both;}
@-webkit-keyframes fadeInUp{
0%{opacity:;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
0%{opacity:;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

第三种:fadeInDown-动画

.pages .p3 .itms .itm-01{ left: 0px;-webkit-animation: fadeInDown 2s ease-out 0.5s 1 both;}
.pages .p3 .itms .itm-02{left: 97px;-webkit-animation: fadeInDown 2s ease-out 1s 1 both;}
.pages .p3 .itms .itm-03{left: 192px;-webkit-animation: fadeInDown 2s ease-out 1.5s 1 both;}
.pages .p3 .itms .itm-04{ left:289px;-webkit-animation: fadeInDown 2s ease-out 2s 1 both;}
.pages .p3 .itms .itm-05{ left: 385px;-webkit-animation: fadeInDown 2s ease-out 2.5s 1 both;}
.pages .p3 .itms .itm-06{ left: 482px;-webkit-animation: fadeInDown 2s ease-out 3s 1 both;}
@-webkit-keyframes fadeInDown{
0%{opacity:;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
0%{opacity:;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:;-webkit-transform:none;-ms-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}

第四种:fadeInLeft-动画

.header-line{
-webkit-animation-name:fadeInLeft;
animation-name:fadeInLeft;
}
.header-line{
background-color: #000;
height: 2px;
animation: fadeInLeft 2s ease 0.3s 1 normal;
}
@-webkit-keyframes fadeInLeft{
0%{
opacity:;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)}
100%{
opacity:;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft{
0%{
opacity:;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
100%{
opacity:;
-webkit-transform:none;
transform:none
}
}

第五种方式:fadeInRight-动画

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: -50px; top: 0px; width: 1100px;-webkit-animation: fadeInRight 9s ease 0s 1 both;}
@-webkit-keyframes fadeInRight{
0%{opacity:;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:;transform:none}
}
@keyframes fadeInRight{
0%{opacity:;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
100%{opacity:;-webkit-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}

animation 动画 与 transition的更多相关文章

  1. 监听css3的animation动画和transition事件

    webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...

  2. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  3. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  4. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  5. css3动画:transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  6. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

  7. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. Android Property Animation动画

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  9. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

随机推荐

  1. 【python爬虫】scrapy入门2--自定义item

    items.py class LianhezaobaospyderItem(scrapy.Item): # define the fields for your item here like: # n ...

  2. sobel( ) 算子

    只是简单的使用方面的记录 sobel()算子是图像处理中用于边缘检测的 opencv-python 中的函数形式为 def Sobel(src, ddepth, dx, dy, dst=None, k ...

  3. 监控-zabbix

    1:什么是监控? 监控:安防的监控  看监控,事后追责 linux监控: 事前预警,数据分析 2:常见的linux监控命令 cpu             1 top 2 htop 3 uptime ...

  4. 使用net Manager工具远程连接Oracle配置监听

    一.在服务端配置Oracle端口 win + R 输入netca 弹出如下窗口后 选择监听程序配置,点击下一步: 二.配置端口号后使用Telnet工具调试端口是否连通 在命令行输入telnet 服务器 ...

  5. JavaSE案例-Bank

    项目介绍 完成基本的银行业务功能 存款 取款 转账 查询余额 修改密码 修改预留手机号 注销账号 退出 任务分解: 定义三个基本类: BankTest():银行业务主程序 Bank(): 银行类,包含 ...

  6. Kivy主窗体大小的控制

    1. 引入依赖模块 主窗体大小的控制,需要使用到kivy.core.window中的Window模块 from kivy.app import App from kivy.core.window im ...

  7. 关于lua的那些事

    1.lua是一个脚本语言,由巴西里约热内卢天主教大学Roberto Ierusalimschy.Waldemar Celes 和 Luiz Henrique de Figueiredo三人所组成的研究 ...

  8. 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo

    一.软件及命令: (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可). (2)命令1:npm install cnpm -g 命令2:cnpm install web ...

  9. GNS3--cisco路由器NAT配置

    一.基础 Cisco路由器配置中NAT的主要命令: 静态NAT: 1.指定NAT内部接口 在内网相应接口的接口配置模式下执行:ip nat inside 2.指定NAT外部接口 在外网相应接口的接口配 ...

  10. jchdl - RTL实例 - Adder

    https://mp.weixin.qq.com/s/9S29BCTcJfbpR62ALjSidA   加法器.   参考链接 https://github.com/wjcdx/jchdl/blob/ ...