animation 动画 与 transition
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的更多相关文章
- 监听css3的animation动画和transition事件
webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...
- css3 transition属性变化与animation动画的相似性以及不同点
下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
- css3动画:transition和animation
概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Android Property Animation动画
3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...
- 超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
随机推荐
- 【python爬虫】scrapy入门2--自定义item
items.py class LianhezaobaospyderItem(scrapy.Item): # define the fields for your item here like: # n ...
- sobel( ) 算子
只是简单的使用方面的记录 sobel()算子是图像处理中用于边缘检测的 opencv-python 中的函数形式为 def Sobel(src, ddepth, dx, dy, dst=None, k ...
- 监控-zabbix
1:什么是监控? 监控:安防的监控 看监控,事后追责 linux监控: 事前预警,数据分析 2:常见的linux监控命令 cpu 1 top 2 htop 3 uptime ...
- 使用net Manager工具远程连接Oracle配置监听
一.在服务端配置Oracle端口 win + R 输入netca 弹出如下窗口后 选择监听程序配置,点击下一步: 二.配置端口号后使用Telnet工具调试端口是否连通 在命令行输入telnet 服务器 ...
- JavaSE案例-Bank
项目介绍 完成基本的银行业务功能 存款 取款 转账 查询余额 修改密码 修改预留手机号 注销账号 退出 任务分解: 定义三个基本类: BankTest():银行业务主程序 Bank(): 银行类,包含 ...
- Kivy主窗体大小的控制
1. 引入依赖模块 主窗体大小的控制,需要使用到kivy.core.window中的Window模块 from kivy.app import App from kivy.core.window im ...
- 关于lua的那些事
1.lua是一个脚本语言,由巴西里约热内卢天主教大学Roberto Ierusalimschy.Waldemar Celes 和 Luiz Henrique de Figueiredo三人所组成的研究 ...
- 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo
一.软件及命令: (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可). (2)命令1:npm install cnpm -g 命令2:cnpm install web ...
- GNS3--cisco路由器NAT配置
一.基础 Cisco路由器配置中NAT的主要命令: 静态NAT: 1.指定NAT内部接口 在内网相应接口的接口配置模式下执行:ip nat inside 2.指定NAT外部接口 在外网相应接口的接口配 ...
- jchdl - RTL实例 - Adder
https://mp.weixin.qq.com/s/9S29BCTcJfbpR62ALjSidA 加法器. 参考链接 https://github.com/wjcdx/jchdl/blob/ ...