css3 animatehue属性
-webkit-perspective(-moz,-o,perspective下同)表示透视范围大小;
-webkit-transform-style很好理解了,表示变换类型,preserve-3d看上去就是3D效果;
-webkit-animation-name 动画名称,像是x轴旋转(x-spin),y轴旋转(y-spin)之类。似乎与as中Tween类的x,y水平还是垂直参数类似。
-webkit-animation-duration 一次动画持续的时间,这个参数在flash Tween类也是有的,单位也是一样的,都是秒。
-webkit-animation-iteration-count表示动画循环的次数,默认是一次,参数infinite表示无穷次。还可以设为任意的正整数,比如3,动画循环3次。
-webkit-animation-timing-function运动类型。参数有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ),这些参数归根结底就是贝赛尔曲线(bezier)(贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。),四个参数,只是ease-out记ease-in-out之类的贝塞尔曲线已经设置好了,可以直接拿来用。其对应关系如下:
linear – 线性,是多大值返回多大的值,y=x
ease – 默认的运动类型, 相当于cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in – 相当于cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out – 相当于cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out – 相当于cubic-bezier(0.42, 0, 0.58, 1.0)
最后还有个很重要的东西,
@-webkit-keyframes back-y-spin {
0% { -webkit-transform:rotateY(360deg); }
50% { -webkit-transform:rotateY(180deg); }
100% { -webkit-transform:rotateY(0deg); }
}
顾名思意,关键帧,就是一些关键的位置要做出的一些变化。可以依次解释为:y轴反向旋转时,当旋转到0%的时候,对象翻转360度,其实也就是没有翻转。当旋转到50%时,翻转180%,这是真正意义上的完全翻转。旋转100%,即旋转了一圈之后,回到初始位置。
css3 animatehue属性的更多相关文章
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- 使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
随机推荐
- jdk 1.6.0_41 下载
Java SE Development Kit 6u41 Product / File Description File Size Download password Linux x86 65.43 ...
- 「模拟赛20180406」膜树 prufer编码+概率
题目描述 给定一个完全图,保证\(w_{u,v}=w_{v,u}\)且\(w_{u,u}=0\),等概率选取一个随机生成树,对于每一对\((u,v)\),求\(dis(u,v)\)的期望值对\(998 ...
- php字符串中去除html标签
strip_tags() 函数剥去字符串中的 HTML.XML 以及 PHP 的标签.
- JEECG入门
姓名:陈中娇 班级:软件151 1.准备: 下载Jdk1.6+.myeclipse.tomcat6.0.MySQL数据库.jeecg-framework压缩包 2.安装:①.安装jdk,配置好环 ...
- eclipse字体
- Educational Codeforces Round 3 B
B. The Best Gift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- 工具类_GsonUtils
import java.lang.reflect.Type; import com.google.gson.Gson; /** * Gson工具类 2015-02-01<br/> * 1, ...
- ubuntu php 连接sql server
1.下载最新的freetds ,访问 http://www.freetds.org/, 或者在 ubuntu上用 wget ftp://ftp.freetds.org/pub/freetds/stab ...
- sshd_config注释
[root@H0f ~]# cat /etc/ssh/sshd_config #update by H0f -- # $OpenBSD: sshd_config,v // :: djm Exp $ # ...
- py---------常用模块2
一.hashilb 模块 python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固 ...