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%，即旋转了一圈之后，回到初始位置。

转载于:https://www.cnblogs.com/zaodianshuo/p/3222875.html

css3 animatehue属性相关推荐

CSS3 box-flex 属性
CSS3 box-flex 属性实例定义两个灵活的p元素.如果父级box的总宽度为300px,#P1将有一个100px的宽度,#P2将有一个200px的宽度: #p1 { -moz-box-fle ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
两点补充——CSS3新属性以及弹性布局
CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位 ...
CSS3 -webkit-transition(属性渐变)
-webkit-transition:CSS属性(none|all|属性) 持续时间时间函数延迟时间 CSS属性(transition-property):要变化的属性,比如元素变宽则是wi ...
定义动画名字html,CSS3 animation-name属性怎么用？
css3 animation-name属性是用来检索或设置对象所应用的动画名称,必须与@keyframes配合使用,因为动画名称由@keyframes定义 :如果有多个属性值,可以用逗号进行分隔. c ...

css3 animatehue属性

css3 animatehue属性相关推荐

最新文章

热门文章