`
lmh2072005
  • 浏览: 114074 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

css3-animation

    博客分类:
  • css
 
阅读更多

 

css3的animation支持动画 ,以前用过transform、transition感觉很酷 ,这个animation 感觉很强大。

 

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>animation</title>

<style type="text/css">

.animation

{

width:50px;

height:50px;

border:1px solid black;

-moz-animation-name:animate;

-moz-animation-duration:5s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-webkit-animation-name:animate;

-webkit-animation-duration:5s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:alternate;

}

@-moz-keyframes animate{

from{

background:red;

}

to{

background:blue;

}

}

@-webkit-keyframes animate{

from{

background:red;

}

to{

background:blue;

}

}

 

#sprite {

width:64px;

height:64px;

background:url(lemmings-walker-sprites.png) 0 0;

-webkit-animation-duration:1s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-timing-function:step-start;

-webkit-animation-name:animate01;

-moz-animation-duration:1s ;

-moz-animation-iteration-count:infinite;

-moz-animation-timing-function:step-start;

-moz-animation-name:animate01;

}

@-webkit-keyframes animate01 {

 0% { background-position:  0px 0; }

 12.5% { background-position:448px 0; }

 25% { background-position:384px 0; }

 37.5% { background-position:320px 0; }

 50% { background-position:256px 0; }

 62.5% { background-position:192px 0; }

 75% { background-position:128px 0; }

 87.5% { background-position: 64px 0; }

 100% { background-position:  0px 0; }

}

@-moz-keyframes animate01 {

 0% { background-position:  0px 0; }

 12.5% { background-position:448px 0; }

 25% { background-position:384px 0; }

 37.5% { background-position:320px 0; }

 50% { background-position:256px 0; }

 62.5% { background-position:192px 0; }

 75% { background-position:128px 0; }

 87.5% { background-position: 64px 0; }

 100% { background-position:  0px 0; }

}

</style>

</head>

<body>

<div class="animation"></div><br />

<div id="sprite"></div>

</body>

</html>


 

 

可惜目前支持的浏览器还比较少 firefox5.0和以上支持,webkit的支持最佳,opera暂时没支持,IE10才会支持

参考:http://caniuse.com/css-animation

animation

 

 

学习文档:

http://www.w3.org/TR/css3-animations/

http://chrismar.sh/2011/07/19/animating-sprites-using-css/

  • 大小: 185.1 KB
分享到:
评论

相关推荐

    CSS3-animation(动画)_Animation_css_

    3. **animation-timing-function**: 描述动画的速度曲线,例如`ease`、`linear`、`ease-in`、`ease-out`、`ease-in-out`等。 4. **animation-delay**: 指定在开始前等待多长时间。 5. **animation-iteration-count...

    利用css3-animation实现逐帧动画效果

    - `animation-fill-mode`: 定义动画结束后元素应处于哪个状态,如 `forwards` 保持在最后一个关键帧状态。 另外,由于浏览器兼容性问题,通常需要使用前缀 `-webkit-`, `-moz-`, `-o-` 来确保动画在各大浏览器中...

    css3-animation-generator:chrome插件css3动画生成器

    Chrome插件Css3动画快速给页面加上炫酷酷css3动画的chrome插件。...3.自主打造npm install -g vue-cli git clone https://github.com/vace/css3-animation-generator cd css3-animation-generator && npm i

    css3-animation-menu_HTML5_CSS3源码_

    【标题】"CSS3 Animation Menu" 是一个基于HTML5和CSS3技术实现的动态二级菜单。这个项目展示了如何利用这两种现代Web技术来创建一个交互性强、视觉效果吸引人的导航菜单。 【HTML5】是HTML的最新版本,它引入了...

    CSS3-animation

    - `animation-timing-function`: 描述动画的速度曲线,例如匀速(linear)、加速(ease-in)、减速(ease-out)或先加速后减速(ease-in-out)。 - `animation-delay`: 设置动画开始前的延迟时间。 - `animation-...

    css3-animation-mock

    "css3-animation-mock" 是一个针对 CSS3 动画进行模拟实践的项目,旨在帮助开发者更深入地理解和运用 CSS3 动画技术。 1. **CSS3 动画基础** CSS3 动画是通过 `@keyframes` 规则定义的一系列样式变化,这些变化会...

    css3-girl-swinging-animation.rar

    【标题】:“CSS3 Girl Swinging Animation” 在Web开发领域,CSS3(Cascading Style Sheets Level 3)是用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档样式的样式表语言。这个“css3-girl-swinging-...

    css3-hover-animation-button.zip

    标题 "css3-hover-animation-button.zip" 暗示了这个压缩包内容主要涉及CSS3技术,特别是关于按钮的悬停效果和动画。CSS3是层叠样式表(Cascading Style Sheets)的第三版,引入了许多新特性,使得网页设计更加丰富...

    jquery绑定 css3 animation-keyframes关键帧动画

    ### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用,尤其当动画需要根据用户的操作...

    Css3 animation---介绍如何实现css的动画

    `animation`属性是CSS3 Animation的核心,它是一个复合属性,可以包含多个子属性,如`animation-name`、`animation-duration`、`animation-timing-function`等。以下是一个完整的`animation`声明示例: ```css div ...

    css动画 css-animation-101.pdf

    CSS动画,或者称为CSS Animation 101,是前端开发中的一个重要概念,它允许开发者为网页元素添加动态效果,从而提升用户体验,使网站更加生动有趣。 首先,我们来看一下为什么要使用CSS动画。动画不仅仅是视觉上的...

    前端项目-css3-animate-it.zip

    为了应用动画,我们需要设置`animation`属性,它包括多个子属性,如`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`等。例如: ```css .element { animation-name: ...

    前端项目-font-awesome-animation.zip

    4. **代码结构**:项目文件夹“font-awesome-animation-master”很可能包含一个或多个HTML文件,用于演示动画效果,以及一个CSS文件,包含了所有动画的CSS代码。开发者可能还使用了SCSS(Sass)或LESS预处理器来编写...

    create-keyframe-animation, 在带有JavaScript的浏览器中,动态生成CSS关键帧动画.zip

    create-keyframe-animation, 在带有JavaScript的浏览器中,动态生成CSS关键帧动画 create-keyframe-animation使用JavaScript在浏览器中动态生成CSS关键帧动画。你用JS描述它们,它在文档 &lt;head&gt; 中生成并插入...

    css3 animation酷炫的文字动画特效

    在本文中,我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分,它允许我们为元素添加平滑、动态的效果,从而提升用户体验和视觉吸引力。在这个主题中,...

    css3弹力球动画animation属性制作3D弹力球弹跳动画效果

    3. `animation-timing-function`: 控制动画的速度曲线,可以是预定义值(如`ease`, `linear`等)或自定义函数。用于模拟不同的运动效果,如弹跳感: ```css animation-timing-function: cubic-bezier(0.25, 0.1, ...

    css3-logo-animation:基于css3的logo动画

    - **动画属性(animation)**:包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction等,它们共同决定了动画的播放方式。...

Global site tag (gtag.js) - Google Analytics