CSS3动画总结学习(一)
动画的分类
平移动画
transform
: 就是变换, 变换, 变换- 也就是能看到的, 直接的更改. 暴力的那种.
.dv {
transform: translate(10px, 10px); /* 位置 */
transform: scale(1, 0.5); /* 缩放 */
transform: rotate(20deg); /* 旋转 */
}
translate
:- 坐标变换.
- 可以接受两个参数, 表示X轴和Y轴上的变化
- 也可以只使用某个位置, 例如
transform: transalteX(10px);
- 可以开启三个轴上的同时变化: 例如
transform: translate3d(10px, 20px, 10px);
rotate
:- 元素旋转
- 可以接受一个参数, 表示需要旋转的角度
- 也可以只在某个位置上进行旋转, 例如:
transform: rotateX(35deg)
; - 也可以在3d方面的旋转变化, 例如:
transform: rotate3d(1, 1, 2, 45deg)
- 关于每个属性的具体原理, 后面具体分析
scale
:- 缩放
- 可以接受一个参数, 表示缩放表示水平和垂直同时缩放的倍数.
- 就收两个参数, 第一个参数表示在水平方向的缩放, 第二个参数表示在垂直方向的缩放
- 同样可以使用
scale3d()
来表示在三维层面的缩放
skew
:- 倾斜
- 表示在X轴上的倾斜角度
- 第二个参数表示在Y轴上的倾斜角度
marix
:- 矩阵
- 这是一个超屌的属性.岂是这一句两句能扯清楚的
- 放一篇大神博客, 以后再来慢慢琢磨: 理解CSS3 transform中的Matrix(矩阵)
过渡动画
- transition: 过渡.
- 这是下面四个属性的简写.
- 就是一个属性的数值, 慢慢的, 平滑的向另一个数值进行改变
transition-property
- 需要设置过度的属性
- 也就是当这个属性变化的, 是慢慢的变化.
- 值是none, 没有过渡属性.
- 默认是all, 所有属性采用过渡的方式变化.
- 当给定过渡时间后, 不需要列出过渡属性, 所有属性默认使用过渡效果.
transition-duration
- 期间, 就是时间, 就是一个这个属性上的值, 变成另一个值的时候, 需要的时间.
- 其值可以是毫秒
ms
, 也可以是秒s
- 有个好玩的地方, 动画默认的是先慢后快.
- 如果我们设置了hover属性五秒完成, 三秒后移开, 这个时候, 会先慢慢的过去, 然后最快的速度回来.
- 我的理解是, 当一个属性值变化的时候, 会有一个函数计算, 还差多少, 完成多少的时候, 是什么速度.
- 默认是0, 不会有过渡.
transition-timing-function
- 动画变化的方式, 快慢的区别
- 允许随着时间来改变速度.
- 默认的方式是:
ease
: 先慢后快. ease: 单词翻译: 缓解, 减轻, 缓慢的落下. linear
: 线性过渡ease-in
: in, 去里面, 进去的时候,慢一点.ease-out
: out, 外边, 走到最后外边的时候, 慢下来.ease-in-out
: 先快再慢再快.cubic-bezier()
: 很牛逼了.
transition-delay
- 在动画开始前, 需要等待的时间.
- 用秒
s
和毫秒ms
计算.
自定义动画(帧动画)
- animation: 动画, 就是动画. 就是c3的动画
- 动画, 还能指什么呢, 各个属性的改变之类的.
- 是个总称:
animation: name duration timing-function delay iteration-count direction
.dv:hover {
animation-name: myAnimaiton;
animation-duration: 3s;
}
@keyframes myAnimaiton {
0% {
padding: 0;
}
100% {
padding: 150px;
}
}
animation-name
- 需要绑定的
keyframe
的名称 - 默认值: none. 无动画效果.
- 后面给一个
@keyframes <animation-name> {// 描述动画}
- 就可以完成动画过程的描述了
- 需要绑定的
animation-duration
- 动画执行的时间
- 默认是0, 无动画执行
- 单位是秒
s
或者毫秒ms
animation-timing-function
- 动画执行的速度
- 具体的参考下
transition-timing-funciton
animation-delay
- 延迟时间.
- 多久后, 开始执行动画
animation-iteration-count
- 动画循环执行的次数
- 可以是具体的数字.
infinite
: 无限次.- 留个疑问: 当鼠标hover的时候, 执行的动画, 为什么鼠标移动的时候, 没有离开元素, 但是元素缩小后, 离开了. 动画没有停止.
animation-direction
- 动画的方向
normal
: 正常方向, 该怎么动, 怎么动.reverse
: 反方向, 从100%-0%的执行alternate
: 交替执行, 从正常方向开始alternate-reverse
: 交替执行, 从反方向开始
CSS3动画总结学习(一)的更多相关文章
- 学习笔记 第十四章 使用CSS3动画
第14章 使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1 设计2D动画 CSS2D Transform表 ...
- 第八十三节,CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介 CSS3提 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
- css3动画学习资料整理
现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- CSS3学习(CSS3过渡、CSS3动画)
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- css3学习--css3动画详解一(animation属性)
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- !!学习笔记:CSS3动画
一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...
随机推荐
- ES索引瘦身 禁用_source后需要设置field store才能获取数据 否则无法显示搜索结果
在默认情况下,开启_all和_source 这样索引下来,占用空间很大. 根据我们单位的情况,我觉得可以将需要的字段保存在_all中,然后使用IK分词以备查询,其余的字段,则不存储. 并且禁用_sou ...
- L87
Fear Makes Art More Engaging Emmanuel Kant spoke often about the sublime, and specifically how art b ...
- codeforces 558C C. Amr and Chemistry(bfs)
题目链接: C. Amr and Chemistry time limit per test 1 second memory limit per test 256 megabytes input st ...
- Nginx均衡负载配置
前言:Nginx也是一种服务器,反向代理服务器.单一tomcat能承受的并发访问量在150-200之间,还是在比较理想的情况下,当并发量超出这个范围,便需要Nginx实现多个tomcat的均衡负载,但 ...
- AtCoder AGC #4 Virtual Participation
我好懒啊QAQ 老规矩 从C开始 C.给一个矩阵,里面有一些紫色方块,你需要涂两个矩阵,一个红色,一个蓝色,保证你涂的颜色四连通 然后把红色蓝色矩阵叠起来要求紫色的地方必须是紫色,其他地方不能是紫色 ...
- CF331B Cats Transport[斜率优化dp+贪心]
luogu翻译 一些山距离起点有距离且不同,m只猫要到不同的山上去玩ti时间,有p个铲屎官人要去把所有猫接走,步行速度为1单位每秒,从1走到N座山不停下,必须在猫玩完后才可以把他带走.可以提前出发.问 ...
- JavaScript:非输入框禁用退格键
在js文件或<javascript>标签中加入如下代码: /** *非输入框禁用退格键 */ function banBackspace(e) { var ev = e || window ...
- 03_通过OpenHelper获取SqliteDatabase对象
MyOpenHelper openHelper = new MyOpenHelper(this); 类似于java的File file = new File();只是声明这个东西,但是文件还并没有真正 ...
- 【转】 mybatis如何在控制台打印执行的sql语句
<strong>######################################################################### #Root Logger ...
- IE浏览器弹出窗口
//弹出一个对话框 参数的顺序: url, iWidth, iHeight, vArguments function openDialog() { var url, len = arguments.l ...