CSS3 Animated Gears

转载 2012年03月21日 12:44:10
CSS3 Animated Gears

CSS3 Animated Gears

In today’s lesson, we have made the animated gears with CSS3. The result looks very nice. I have used CSS3 keyframes, animation and transforms (rotate) in order to achieve this result. Please pay attention – current demo works well in Firefox and Chrome / Safari (webkit).


Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. Here is the html code of our result. There are easy DIV elements.

index.html

<div class="container">
    <div class="gear" id="gear1"></div>
    <div class="gear" id="gear2"></div>
    <div class="gear" id="gear3"></div>
    <div class="gear" id="gear4"></div>
    <div class="gear" id="gear5"></div>
    <div class="gear" id="gear6"></div>
    <div class="gear" id="gear7"></div>
</div>

Step 2. CSS

Here are the CSS styles of our animated gears.

css/layout.css

/* CSS3 keyframes */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

/* gears */
.gear {
    float: none;
    position: absolute;
    text-align: center;

    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
    background: url('../images/g1.png') no-repeat 0 0;
    height: 85px;
    left: 31px;
    top: 45px;
    width: 85px;

    -moz-animation-name: ckw;
    -moz-animation-duration: 10s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 10s;
}
#gear2 {
    background: url('../images/g2.png') no-repeat 0 0;
    height: 125px;
    left: 105px;
    top: 10px;
    width: 125px;

    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
#gear3 {
    background: url('../images/g3.png') no-repeat 0 0;
    height: 103px;
    left: 149px;
    top: 118px;
    width: 103px;

    -moz-animation-name: ckw;
    -moz-animation-duration: 13.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 13.5s;
}
#gear4 {
    background: url('../images/g4.png') no-repeat 0 0;
    height: 144px;
    left: 46px;
    top: 173px;
    width: 144px;

    -moz-animation-name: cckw;
    -moz-animation-duration: 20.2s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 20.2s;
}
#gear5 {
    background: url('../images/g1.png') no-repeat 0 0;
    height: 85px;
    left: 127px;
    top: 292px;
    width: 85px;

    -moz-animation-name: ckw;
    -moz-animation-duration: 10s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 10s;
}
#gear6 {
    background: url('../images/g2.png') no-repeat 0 0;
    height: 125px;
    left: 200px;
    top: 283px;
    width: 125px;

    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
#gear7 {
    background: url('../images/g3.png') no-repeat 0 0;
    height: 103px;
    left: 277px;
    top: 217px;
    width: 103px;

    -moz-animation-name: ckw;
    -moz-animation-duration: 13.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 13.5s;
}

Step 3. Images

I have used next images:

gear 1
gear 2
gear 3
gear 4



【CSS3】异步动画

css3实现异步动画
  • jean_lee
  • jean_lee
  • 2015年07月10日 14:38
  • 837

使用Google Gears 心得

昨天尝试使用了一下Google Gears ,分享一些心得如下: 1、Google Gears 支持IE6、IE7、FireFox2.0、FireFox3.0 。对于IE来说Google Gears本...
  • xjbx
  • xjbx
  • 2008年07月21日 13:58
  • 4135

CSS3 animated tooltips

来源【可看效果】:http://www.script-tutorials.com/css3-animated-photo-slider/ CSS3 animated tooltips To...
  • load_life
  • load_life
  • 2012年02月08日 09:42
  • 291

【分享】GEARS of DRAGOON 1+2【日文硬盘版】[带全CG存档&攻略+SSG修改+打开存档补丁]

冒险者们哟,寻找龙秘玉吧——! ninetail的最新作,是使用丰富多彩的技能·道具探索迷宫的3D迷宫RPG! 存在着骑士和神官的架空世界常见的职业为首的13种职业,超过数百种的道具的登场! 和伙伴一...
  • wangzi867258173
  • wangzi867258173
  • 2016年02月06日 18:46
  • 12938

A Simple Scene Animated with CSS3

A Simple Scene Animated with CSS3 (requires Chrome, Safari, Firefox 5+, or IE10 PP3) Use the button...
  • hsany330
  • hsany330
  • 2013年03月05日 11:44
  • 381

ReactNative动画(上)

在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式。 我们来个简单的示例: var AwesomeProj...
  • wustzbq0713
  • wustzbq0713
  • 2016年05月19日 17:14
  • 895

css3动画库——animate.css以及css3动画一些有趣的实现

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOu...
  • u012778836
  • u012778836
  • 2016年02月22日 14:14
  • 1499

animated库

@charset "UTF-8";/*! * animate.css -http://daneden.me/animate * Version - 3.5.0 * Licensed under ...
  • u012260672
  • u012260672
  • 2015年12月28日 11:12
  • 541

-(void)viewWillAppear:(BOOL)animated,- (void)viewDidLoad 的区别。

viewwillappear是每次视图控制器的视图出现前执行的代码。 而viewdidload是每次视图控制器载入是执行的代码。 比如说:当a视图控制器的视图第一次出现是两个都要执行,但当...
  • web718
  • web718
  • 2014年08月07日 15:43
  • 7064

React Native Animated 动画详解 - 实例篇 (这篇就够了)

之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例。学习完 本篇相信大家对于动画库的基本使用应该是没有问...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月09日 10:28
  • 722
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 Animated Gears
举报原因:
原因补充:

(最多只允许输入30个字)