[ CSS ] animation 快速参考

仅供快速参考，如果想详细了解相关内容，请参阅阮老师的博客：
http://www.ruanyifeng.com/blo...

css关于动画和变换部分有3个词很容易混淆，分别是transform(变换), translate(平移), transition(过渡)

其中transform和translate常见于如下形式：

.class
{transform: translate(826px);
}

而transition用于css3的动画，表示过渡效果

1. transition

.class1
{transition: duration <delay> <property> <timing-function>, an other group;
}
.complete
{transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease;
}

2. animation

animation的写法

.class1
{animation: duration <delay> name <timing-function> <iteration-count> <fill-mode> <direction> <step(n)>;animation-play-state: play-state;
}

duration: 1s
delay: 1s
name: name
timing-function: linear | ease-in | ease-out | cubic-bezier
iteration-count: 10 | infinite
fill-mode: forwards | none | backwards | both
direction: normal | alternate | reverse | alternate-reverse
step(n): step(2) | step(10)
play-state: running | paused

keyframe的写法

@keyframes rainbow
{0%{ background: #c00; }50%{ background: orange; }100%{ background: yellowgreen; }
}
@keyframes rainbow
{from{background: #c00;}50%{ background: orange; }to{ background: yellowgreen; }
}

[ CSS ] animation 快速参考相关推荐

CSS魔法堂：更丰富的前端动效by CSS Animation
前言在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
《HTML5和CSS3快速参考》——第1章走进HTML51.1 概述
本节书摘来自异步社区<HTML5和CSS3快速参考>一书中的第1章,第1.1节,作者: [美]Sergey Mavrody 更多章节内容可以访问云栖社区"异步社区"公众 ...
嵌入式Linux图形系统快速参考手册
嵌入式Linux图形系统快速参考手册 (Embedded Linux Graphics Quick Reference Guide) 译自:http://www.linuxdevices.com/ 原 ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
OGG学习笔记04-OGG复制部署快速参考
OGG学习笔记04-OGG复制部署快速参考源端:Oracle 10.2.0.5 RAC + ASM 节点1 Public IP地址:192.168.1.27 目标端:Oracle 10.2.0.5 ...
css html 优化,CSS Animation性能优化
CSS Animation是实现Web Animation方法之一,其主要通过@keyframes和animation-*或者transition来实现一些Web动效.不过今天我们聊的不是怎么制作We ...
SED单行脚本快速参考(Unix流编辑器)
SED单行脚本快速参考(Unix流编辑器) « web2.0ã€äº'è®¡ç®-ã€é›†ç¾¤ã€é«˜å¯ç"¨æ€§ SED单行脚本快速参考(Unix流编辑器) 2005年12月29 ...
CSS命名规则--参考表
CSS命名规则--参考表 **************************************************** CSS命名规则 ************************** ...
利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
linux单机到单机adg环境,Oracle 11.2.0.4 DataGuard 环境打PSU,OJVM PSU补丁快速参考
环境:RHEL6.5 + Oracle 11.2.0.4 DataGuard physical standby 主库和备库都是单节点. 需求:主备库同时应用160719的PSU和OJVM PSU补丁. ...

[ CSS ] animation 快速参考

1. transition

2. animation

animation的写法

keyframe的写法

[ CSS ] animation 快速参考相关推荐

最新文章

热门文章