css3动画transition animation
CSS动画简介 transition animation
transition过渡:css3通过transitions属性引入时间概念,通过开始、结束状态自动计算中间状态,实现状态改变的过渡效果。
transition-property:应用过渡的css属性
transition-duration:过渡效果话费的时间
transition-timing-function:过渡效果的时间曲线(状态变化速度)
ease(默认,逐渐变慢)、linear、ease-in(加速)、ease-out(减速)、cubic-bezier函数(三次贝塞尔曲线),自定义速度模式
cubic-bezier三次贝塞尔曲线
transition-delay:过渡效果何时开始(秒、毫秒)
三次贝塞尔曲线是一个好的模型用于简单描述速率曲线,如chrome Dev-tools下图
css3 transitions 浏览器支持情况 Can i use IE10+支持无前缀的transition属性
使用注意:
不是所有CSS属性都支持transition
transition需明确知道开始、结束状态的具体数值,才能计算出中间状态。
eg,height从0px到auto的中间状态,display:none到block,background:url(foo.jpg)到url(bar.jpg)
transition使用局限
transition需事件触发,无法在网页加载时自动发生。
transition是一次性的,不能重复发生,除非一再触发
transiton只能定义开始和结束状态,不能定义中间状态。
animation:
@keyframes 创建动画的关键帧(动画名称、动画时长百分比)
@keyframes myAnimation
{ from { background: red;}
50% { background: green; }
100% { background: blue; } }
animation:所有动画属性的简写属性
animation-name:引用的@keyframes创建的动画的名称
animation-duration、animation-timing-function、animation-delay、
animation-iteration-count:数字/infinite|(默认1)、animation-direction:normal/alternate(动画是否在下一周期逆向地播放)
animation-play-state:paused/running(默认),
animation-fill-mode:none(默认)/forwards/backwards/both, 动画结束后会立即从结束状态跳回起始状态,
none(默认),回到动画没开始时的状态
forwards让动画停留在结束状态、
backwards回到第一帧状态
both向前向后填充模式都被应用
注意:浏览器从一个状态向另一个状态过渡是平滑过渡。steps函数可实现分布过渡
eg div:hover { animation: 1s rainbow infinite steps(10) }//可实现字体打印效果
css3动画transition animation的更多相关文章
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- CSS3动画以及animation事件
1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...
- CSS3(transform/transition/animation) 基础 总结
1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- css3 tranform transition animation
tranform:对象图形变形 tranform的属性包括: 1.none 表示不进行变换: 2.rotate 旋转 transform:rotate(20deg) 旋转 ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- 【WEB前端系列之CSS】CSS3动画之Animation
前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...
随机推荐
- 关于 HDC 的释放
GetDC和ReleaseDC的调用配对,CreateDC和DeleteDC的调用配对. GetDC是从窗口获取现有的DC,而CreateDC是创建DC,所以ReleaseDC和DeleteDC的作用 ...
- Unity Shader基本例子
Unity中,对于一个物体我们想要改变其的外观,就需要给其增加一个材质,即Matiral 一般的Matiral采用的是标准的Shader,而标准的Shader并不是最好的渲染物体表明的效果,那么我们就 ...
- 多线程程序在单核cpu与多核cpu上是怎么工作的?
转自 1.多线程在单核和多核CPU上的执行效率问题的讨论 a1: 多线程在单cpu中其实也是顺序执行的,不过系统可以帮你切换那个执行而已,其实并没有快(反而慢) 多个cpu的话就可以在两个cpu中同时 ...
- Luogu P4009 汽车加油行驶问题
题目链接 \(Click\) \(Here\) 分层图..好长时间没写差点要忘了\(hhhhh\),其实思路还是很明了的. 注意需要强制消费. #include <bits/stdc++.h&g ...
- 基础教程:Mac 电脑小白应该了解哪些东西?
文章素材来源:知乎 文章收录于:风云社区(www.scoee.com),提供1700多款mac软件下载. 本文提供给那些从 PC 阵营初入 Mac 的同学而准备的,我们希望从硬件和软件.设计风格和使用 ...
- python自动化开发-[第十八天]-django的ORM补充与ajax,分页器
今日概要: 1.ORM一对多,多对多 2.正向查询,反向查询 3.聚合查询与分组查询 4.F查询和Q查询 5.ajax 6.分页器 一.ORM补充: django在终端打印sql语句设置: LOGGI ...
- python自动化开发-[第十二天]-前端Css
CSS基本语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: v ...
- bzoj3237 cdq分治+可撤销并查集
https://www.lydsy.com/JudgeOnline/problem.php?id=3237 年轻的花花一直觉得cdq分治只能用来降维,不料竟然可以用来分治询问 N<=100000 ...
- 2017-12-14python全栈9期第一天第六节之用户交互
9,用户交互.input 1,等待输入, 2,将你输入的内容赋值给了前面变量. 3,input出来的数据类型全部是str 10,基础数据类型初始.数字:int 12,3,45 + - * / ** % ...
- java用流的方式加载图片
前端: <img ng-show="photo" class="vertical_b" id="photoImg" src=" ...