CSS3 Animation PPT

CSS3动画 妥妥儿的

主要内容

• 介绍
• 基本用法
• 动画解剖
• 个人看法

CSS3动画的一些情报

基本用法TransitionTransformAnimation

示例

• transition-property: all
• transition-duration: .6s
• transition-timing-function: ease-out
• transition-delay: 2s
• -webkit-transition: all .6s ease-out 2s;

试试 *{-webkit-transition: all .6s ease-in-out 2s}

REF : W3C Transitons

基本用法TransitionTransformAnimation

示例

• scale(2,3)
• skew(45deg,30deg)
• rotate(45deg),rotateX(45deg),rotateY(45deg)
• translate(-20px,-20px),translateZ(20px)
• -webkit-transform:scale(2) rotate(45deg) translate(-20px);

REF : W3C Transforms

基本用法TransitionTransformAnimation

示例

@-webkit-keyframes start-active{
    0%{ -webkit-transform:scale(1) rotate(0); }
    15%{ -webkit-transform:scale(1.1)  rotate(0);}
    30%{ -webkit-transform:scale(1)  rotate(0);}
    100%{ -webkit-transform:scale(0) rotate(180deg);} 
}
-webkit-animation:start-active 1 ease-in-out 1.5s; 

REF : W3C Animations

目前的一些不足

• CPU渲染
• 浏览器前缀
• ....

动画分解

示例：淘宝内衣首页

1. 触发： hover
2. 执行：0%{-webkit-transform: translate(0,0);} 100%{-webkit-transform: translate(0,-10px);}
3. 执行：0%{ opacity:1; -webkit-transform: translate(0,-10px); } 50%{ opacity:.7; } 100%{ opacity:1; }

一些有趣的例子

• 文字转换
• Multiple 3D Cubes
• Space
• ....

难在想法

• 观察和发现
• 适当了解一些交互和视觉
• 一点点虚荣心

别滥用动画

FAQ