CSS3 动画
来源:互联网 发布:python arima 编辑:程序博客网 时间:2024/06/06 08:37
CSS3 提供给了我们非常多的转换函数:
2D: translate, rotate, scale, skew.3D: translate3d, rotate3d, scale3d, skew3d.
只需要将这些函数作为transform属性的值,就可以设置相应的效果。
CSS3 动画则是将这些效果以及其他CSS属性按照你设定的方式来进行互相转变。
- 动画相关属性
属性 描述
@keyframes 定义动画各个阶段的状态的代码段animation 所有动画属性的简写属性,除了 animation-play-state 和 animation-fill-mode 属性。animation-name 规定 @keyframes 动画的名称。animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function 规定动画的速度曲线。默认是 ease。animation-delay 规定动画何时开始。默认是 0。animation-iteration-count 规定动画被播放的次数。默认是 1。animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal。animation-play-state 规定动画是否正在运行或暂停。默认是 running。animation-fill-mode 规定元素在动画开始前和完成后的状态,默认是 none。
- 列表内容
@keyframes
定义动画各个阶段的状态的代码段。比如开始态,结束态,中间态(使用百分比表示)。
@keyframes exampleName { from { transform: rotateY(0deg); background: #000000; } 50% { transform: rotateY(180deg); background: #00fa7e; } to { transform: rotateY(0deg); background: #008dff; }}
animation-name
使用 @keyframes 定义的状态集合名称,如上面的 exampleName。
animation-duration
动画的周期时间。单位可以是秒(s),也可以是毫秒(ms)。
animation-timing-function
动画变化速度函数,有如下几种选项:
linear: 速度不变。cubic-bezier(0,0,1,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)
ease: 与 ease-in-out 基本相同,但是开始稍微比结束快一点儿。cubic-bezier(0.25,0.1,0.25,1)
cubic-bezier(x1, y1, x2, y2): 使用三次贝塞尔函数作为速度函数。
cubic-bezier曲线测试调试网站:cubic-bezier
animation-delay
动画开始之前等待的时间。单位可以是秒(s),也可以是毫秒(ms)。
animation-iteration-count
动画的循环次数。可以是具体的次数,也可以是 infinite,表示无限循环播放。
animation-direction
动画循环的方向:
normal: 正向播放。
reverse: 反向播放。
alternate: 正向播放与反向播放交替进行。
animation
以上6个属性可以使用这一个属性来表示,格式为:
animate: name duration timing-function delay iteration-count direction;
animation-play-state
控制动画的状态,有播放(running)和暂停(paused)两种状态。
animation-fill-mode
规定元素在动画开始前和完成后的状态。
none: 元素在动画前后的状态和动画没有联系。
forwards: 动画完成后,元素保持动画最后的状态。
backwards: 动画开始前,元素保持动画开始的状态。
both: forwards 和 backwards 的结合。
2. transition
CSS3 除了 animation 相关的属性以外,还提供给我们一个 transition 属性,格式为:
transition: propertyName duration [timing-function] [delay], …;
大家可能已经也看出来了,其实 transition 就是 @keyframes 只有 from 和 to 两个状态,并且播放次数为1,且不能暂停的 animation。
举个例子,当鼠标放到一个 div 上的时候,它旋转90度,并且背景从黑色变为灰色,字体从白色变为黑色。
<div id="division2"></div>#division2 { width: 300px; height: 100px; margin-top: 50px; font-size: 2em; text-align: center; line-height: 100px; color: #FFF; background: #000; transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;}#division2:hover { background: #cccdd1; color: #000; transform: rotate(90deg);}
- css3动画
- css3动画
- css3动画
- css3动画
- css3动画
- CSS3动画
- css3.动画
- CSS3动画
- CSS3动画
- CSS3动画
- css3-动画
- CSS3动画
- css3动画
- css3动画
- CSS3 动画
- CSS3动画
- CSS3动画
- css3-动画
- 近一个月的面试总结_Java岗
- Perl 替换字符串应用
- 超分辨率(super-resolution)VS解模糊(deblur)
- 如何监听CollapsingToolbarLayout的展开与折叠
- 微信公众平台 获取access_token
- CSS3 动画
- LeetCode@513_Find_Bottom_Left_Tree_Value
- ArrayList底层原理以及使用技巧
- Mac Security工具使用总结find-identity
- js回调函数的理解及简单实例
- 建造者模式学习记录
- 2.2 放大器的基本分析方法
- 水平线阵的反卷积常规波束形成
- 【java笔试系列七】java多线程