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在有 ...
随机推荐
- [原创]RTX使用printf输出后进入hardfault中断的处理方法 - 讨论
今天我用到RTX里面使用printf ,发现程序死掉了 我发现很多人遇到了这样的问题 找了网上很多的文章,说是这个是RTX的一个先天不足的问题 我发现了正点原子的 原子哥的解决方案,如下所示: --- ...
- React Router简单Demo
简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...
- 赛艇表演 51nod提高组模拟试题
AC通道 题目描述 小明去某个地区观看赛艇比赛,这个地区共有n个城市和m条道路,每个城市都有赛艇比赛,在第i个 城市观看赛艇表演的价钱为ai, 去其他城市观看也需要支付赛艇表演的价格.任意两个城市之间 ...
- Pycharm虚拟环境的使用
Pycharm虚拟环境的使用 pycharm创建项目的时候,一定勾选inhert global site-packages.不然系统的库就没法用了. 打开Project Interpreters页面: ...
- Linux 比较常用的命令
#磁盘空间 df -h 显示已经挂载的分区列表 du -sh [file] 估算当前使用磁盘空间 du -sk * | sort -rn 以容量大小递减排序 文件搜索 find find [file_ ...
- 2018-ECCV-PNAS-Progressive Neural Architecture Search-论文阅读
PNAS 2018-ECCV-Progressive Neural Architecture Search Johns Hopkins University(霍普金斯大学) && Go ...
- 多服务器 vps 管理方法,十款远程桌面软件测评分析
作为运维工作者,从几年前巨大的工作量到如今有了极大的改善,这些年试用的远程桌面管理软件不在少数. 远程桌面是微软公司为了方便网络管理员管理维护服务器而推出的一项服务.从windows 2000 ser ...
- Multiple annotations found at this line: - Undefined attribute name (charset).
把 meta charset="UTF-8" 改为 meta http-equiv="Content-Type" content="text/html ...
- Shell脚本 (一) 概述、解析器、脚本入门
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一. Shell 脚本概述 1. Shell 的 含义: Shell 是一个用C语言编写的程序,它是用户 ...
- Java实现 LeetCode 234 回文链表
234. 回文链表 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否 ...