-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属性的更多相关文章

  1. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  2. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  3. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  4. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  5. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  6. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  7. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  8. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

随机推荐

  1. BZOJ 2725 [Violet 6]故乡的梦 线段树+最短路树

    \(\color{#0066ff}{ 题目描述 }\) \(\color{#0066ff}{输入格式}\) \(\color{#0066ff}{输出格式}\) \(\color{#0066ff}{输入 ...

  2. 最短路【洛谷P1841】 [JSOI2007]重要的城市

    P1841 [JSOI2007]重要的城市 题目描述 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向 ...

  3. 10.6-10.7 牛客网NOIP模拟赛题解

    留个坑... upd:估计这个坑补不了了 如果还补不了就删了吧

  4. 当我们谈论CloudTable时究竟在谈论什么?

    表格存储服务(CloudTable Service,简称CloudTable)是基于Apache HBase提供的分布式.可伸缩.全托管的毫秒级NoSQL数据存储服务.它提供了毫秒级的随机读写能力,适 ...

  5. An error has occurred. See error log for more details. java.lang.NullPointerException

    今天重新新建一个eclipse的空间,就报了这么一个错误,百度找了很多,发现不对头,都不行.后来点开错误一看,原来是web.xml里面没有文件头造成的. 解决办法:只需要在web.xml文件里添加文件 ...

  6. [PowerShell] check PowerShell Version

    如果你已经开始在日常的工作中大量使用PowerShell自动化重复工作.建议你使用3.0以上的版本. 可以使用如下命令检测你的PS版本 如需要安装PowerShell,可以参看https://tech ...

  7. N - 嘤嘤嘤 (并查集+枚举)

    Our lovely KK has a difficult Social problem. A big earthquake happened in his area. N(2≤N≤2000)N(2≤ ...

  8. Alibaba Java Coding Guidelines 安装(eclipse)并简单使用

    源码地址:https://github.com/alibaba/p3c 1.安装 第1步.help >> Instakll New Software... 第2步.在Work with中输 ...

  9. Zero Sum Subarray

    Given an integer array, find a subarray where the sum of numbers is zero. Your code should return th ...

  10. Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)

    1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...