Using Keyframes – WebKit CSS Animation Examples
来源:互联网 发布:网络销售培训简介 编辑:程序博客网 时间:2024/05/17 22:34
Now WebKit supports explicit CSS animations! After seeing the new animation examples posted onWebKit.org, I needed to test keyframes
by myself.
So I have created a dumb-downed version of the fallen leaves seen on webkit.org blog, called “Let it Snow”.
Unlike the fallen leaves example, I stick strictly with CSS only (means zero JavaScript). Also I tested on Webkit nightly and an iPhone (OS 2.0) Safari. On my iPhone (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20
), the animation is slow and some feature is ingored.
Well, let’s see the “Let It Snow” animation in action!
How to use Keyframes?
Keyframes are specified with the CSS “At-Rule” by using the keyword,@-webkit-keyframes, followed by an identifier (= animation-name)
@-webkit-keyframes animation-name { from { style definition ["Before"-state] } to { style definition ["After"-state] }}
A keyframe defines the styles applied within the animation. To specify multiple frames, use “%” instead of “from” and “to” keywords.
Here’s an actual example I used for “Let it Snow”.
@-webkit-keyframes fade { 0% { opacity: 0; } 10% { opacity: 0.8; } 100% { opacity: 0; }}
This style is applie to create each snow flake appearance. A snowflake blurry appears (increase opacity) when 10% of the time elapsed (The total time is defined later. I’ll explain it next).
And at the end, the snowflake disappears (opacity back to zero).
Once the animation timeframe is defined, apply it using -webkit-animation-name and related properties.
I set total animation duration as 5 seconds, and the animatin goes forever (= infinite times. The default is 1).
See the simplified example below.
#snow div { -webkit-animation-name: fade; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite;}
<div id="snow" class="snow"> <div>❅</div> /* an entity for ❅ */</div>
Using Transform
Let’s rotate and move around snowflakes by using -webkit-transform
.rotate
, of course, rotate the element, and translate
specifies a 2D translation by the vector [tx, ty]. (For more explanations, please see CSS transform spec page).
I used percent, 0 and 100% here, but of course you can use “from” and “to”.
Also note that transform
doesn’t seem to work on current iPhone Safari yet.
@-webkit-keyframes spin{ 0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);} 100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}}
You can just add the amination-name to the #snow div selector, separating with comma.
#snow div { -webkit-animation-name: fade, spin; ...}
More
For the “Let it snow” example, I also include the cheesy “accumulate” keyframe to make snow accumulate on ground. Kinda ugly though.
Moreover, I gave the -webkit-animation-duration
to individual snowflake so all flakes don’t fall all together!
.snowflake { color: #fff; font-size: 2em; position: absolute; (Note: The parent container is set relative positioned!)}.snowflake.f1 { left: 40px; -webkit-animation-duration: 5s;}.snowflake.f2 { font-size: 1.8em; left: 120px; -webkit-animation-duration: 7s;}...
<div id="snow" class="snow"> <div class="snowflake f1">❅</div> /* an entity for ❅ */ <div class="snowflake f2">❄</div> /* an entity for ❄ */ ... (add two more snowflake-div in the actual sample)</div>
To view the entire markup and CSS, just view source of the sample file!
- Using Keyframes – WebKit CSS Animation Examples
- CSS动画@-webkit-keyframes
- css3 -webkit-animation与-webkit-keyframes
- css属性之animation与@keyframes制作天空动态云彩
- 在animation的"keyframes"
- CSS3 animation,@keyframes 动画
- CSS3 -webkit-keyframes(时间轴)
- CSS 3 Keyframes 把玩
- css @keyframes动画
- css 动画 @keyframes
- CSS@keyframes使用方法
- CSS 3 Keyframes
- webkit-animation
- -webkit-animation
- 以Webkit为核心的浏览器的CSS样式—–Animation
- css3 @-webkit-keyframes 这种格式什么意思
- Css3 - Animation Examples
- 详解css3系列:动画@keyframes和Animation
- 分享一下我的非主流实习求职经历——献给非名校会计不想做国企和公务员GPA不高英语...
- C++标准转换运算符reinterpret_cast
- 分布式WEB服务器架构
- Phone重绘机制drawRect
- LTE note 2012.12.27
- Using Keyframes – WebKit CSS Animation Examples
- 真正的独立
- 利用描点绘图法求解复杂函数
- Tomcat不支持中文路径的解决办法
- TabStop 属性
- 二分算法
- 调用COM新建一个空白文档并加入链接
- fstream
- 一个不错的事件处理结构