css3 animation备忘
来源:互联网 发布:淘宝商家达人 编辑:程序博客网 时间:2024/05/18 03:27
部分解读摘自http://www.runoob.com/cssref/css3-pr-animation.html
css3 的动画功能,可以取代许多用js实现的动画效果。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。制定规则后需把它绑定到一个选择器上。
hack:
.test{ -webkit-animation:myfirst; -moz-animation: myfirst; -o-animation: myfirst; animation: myfirst; }
@keyframes myfirst{25% {background:yellow;}50% {background:blue;}}@-moz-keyframes myfirst /* Firefox */{25% {background:yellow;}50% {background:blue;}}@-webkit-keyframes myfirst /* Safari and Chrome */{25% {background:yellow;}50% {background:blue;}}@-o-keyframes myfirst /* Opera */{25% {background:yellow;}50% {background:blue;}}
animation: spin4 2s steps(4) infinite;
spin4:加载名为spin4的动画;
2s:本次动画周期;
steps(4); steps(n,[ start | end ] ]?)这个阶梯函数,这个函数可以把动画平均划分为基本相等的,这个n是一个自然数,意思就是把一个动画平均分成n等分,直到平均地走完这个动画,这个要跟linear区别开来,因为linear是把动画作为一个整体,中间没有断点,而steps是把动画分段平均执行开来。step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的部分为开始;step-end等同于steps(1,end):动画分成一步,动画执行时以结尾端点为开始,默认值为end。
infinite:指定动画应该播放无限次(永远)
animation-duration: time;
animation-timing-function: value;
animation-timing-function使用的数学函数,称为三次贝塞尔曲线,速度曲线。使用此函数,您可以使用您自己的值,或使用预先定义的值之一:
animation-delay: time;
animation-iteration-count: value;
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
属性值
animation-play-state: paused|running;
0 0
- css3 animation备忘
- CSS3 animation
- CSS3 Animation
- CSS3 Animation
- CSS3 Animation
- CSS3 Animation
- CSS3 Animation
- css3 animation
- [CSS3] Animation
- CSS3 Animation
- CSS3 animation
- CSS3 Animation
- css3 animation
- css3 animation
- CSS3 Animation
- CSS3 Animation
- CSS3-Animation
- 【css3】animation
- mysql 5.7版本修改编码为utf-8
- visio的vsd文件转eps图流程
- 013.py
- POJ 1269
- 014.py
- css3 animation备忘
- 安卓线程切换优雅的写法
- Android Studio签名打包的两种方式
- 018.py
- 019.py
- Intiall Eclipse PyDev&…
- leetcode数组之Trapping Rain Water
- Apache win10的安装
- sysbench压力测试工具使用详细说明