css3 animation library - animate.css and some interesting implementations of css3 animation

Introduction

animate.css is a CSS3 animation library from abroad, it presets shake, flash, bounce, flip, rotate (rotateIn/rotateOut), fadeIn/fadeOut There are more than 60 kinds of animation effects, including almost all common animation effects.

Although animate.css can make CSS3 animation effects very convenient and fast, it is still recommended to take a look at the code of animate.css, maybe you can learn something from it.

compatible

Browser compatibility: Of course, it is only compatible with browsers that support CSS3 animate properties, they are: IE10+, Firefox, Chrome, Opera, Safari.

Instructions

1. Import files

<link rel="stylesheet" href="animate.min.css">

2. HTML and its use

<div class="animated bounce" id="dowebok"></div>

After adding a class to the element, refresh the page and you can see the animation effect. animated is similar to a global variable, it defines the duration of the animation; bounce is the name of the specific animation effect of the animation, you can choose any effect.

If the animation is to play infinitely, you can add class infinite.

You can also add these classes to elements via JavaScript or jQuery, for example:

$(function(){
    $('#dowebok').addClass('animated bounce');
});

Some animation effects will eventually make the element invisible, such as fading out, sliding to the left, etc., maybe you need to delete the class, such as:

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

注意添加浏览器前缀。

查看实现效果：http://www.dowebok.com/demo/2014/98/

用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。

http://www.jiawin.com/demo/6583.html

下载地址：http://pan.baidu.com/s/1jGigowI

一、HTML结构

这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的，最后再重组成一个完整的动画效果。

<section>
  <div class="stage">
    <div class="nightOverlay"></div>
    <div class="skyline"></div>
    <div class="beans"></div>
    <div class="ground back"></div>
    <div class="ground mid"></div>
    <div class="ground front"></div>
    <div class="cloud large"></div>
    <div class="cloud small"></div>
    <div class="cloud medium"></div>
    <div class="balloon"></div>
    <div class="dowEventCenter"></div>
    <div class="planetarium"></div>
    <div class="friendshipShell"></div>
    <div class="glockenspiel"></div>
    <div class="rotation">
      <div class="sun"></div>
      <div class="moon"></div>
    </div>
  </div>
</section>

二、动画解析

整个城市场景的动画是由若干个元素的动画组成，如：天空的变化、云朵的运动、太阳的自转等等。在下面我们一一来为大家解析每个动画的实现思路以及代码组成。

天空的变化

.stage {
	position: relative;
	overflow: hidden;
	height: 600px;
	background: #ddf5f7;
	-webkit-animation: skyset 110s infinite linear;
	-moz-animation: skyset 110s infinite linear;
	-o-animation: skyset 110s infinite linear;
	animation: skyset 110s infinite linear;
}
@keyframes skyset {
 0% {
 background: #ddf5f7;
}
 23% {
 background: #ddf5f7;
}
 25% {
 background: #350847;
}
 27% {
 background: #0f192c;
}
 50% {
 background: #0f192c;
}
 68% {
 background: #0f192c;
}
 75% {
 background: #f9c7b8;
}
 82% {
 background: #ddf5f7;
}
 100% {
 background: #ddf5f7;
}
}

天空的颜色逐渐的变暗然后又变亮，这是一个有序的过程，但得注意时间的安排。

天黑遮罩层变化

当天空变暗时，也就是到黑夜时，整个城市也是变暗的，所以我们在整个城市的上方加个遮罩层，以背景色来实现，逐渐改变其透明度来实现变化。

.nightOverlay {
	z-index: 9999;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 25, 44, 0.7);
	opacity: 0;
	-webkit-animation: set 110s infinite linear;
	-moz-animation: set 110s infinite linear;
	-o-animation: set 110s infinite linear;
	animation: set 110s infinite linear;
}
 @keyframes set {
 0% {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
}
 50% {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 opacity: 1;
}
 100% {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
}
}

太阳自转以及动画

在这里我们需要两个图标，一个是白天的太阳（黄色），一个是夜晚的太阳（黑色）。然后我们再让这个图片轮流显示在画面上就行。

.rotation {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	margin: -350px 0 0 -350px;
	height: 700px;
	width: 700px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: rotation 110s infinite linear;
	-moz-animation: rotation 110s infinite linear;
	-o-animation: rotation 110s infinite linear;
	animation: rotation 110s infinite linear;
}
 @keyframes rotation {
 0% {
 transform: rotate(45deg);
}
 100% {
 transform: rotate(405deg);
}
}
.sun, .moon {
position: absolute;
height: 145px;
width: 145px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.sun {
top: 0;
left: 0;
background: yellow;
}
.moon {
bottom: 0;
right: 0;
background: black;
}

云朵的移动

示例中总共有三朵云朵，分别为大、中、小，为了有更加逼真的效果，我们要分别定义三朵云朵的运动速度、位置以及大小。

.cloud {
	position: absolute;
}
.cloud.small {
	z-index: 1;
	top: 5%;
	left: 15%;
	background: url(images/cloudSmall.png) no-repeat no-repeat center;
	height: 50px;
	width: 89px;
	-webkit-animation: cloudSmall 165s infinite;
	-moz-animation: cloudSmall 165s infinite;
	-o-animation: cloudSmall 165s infinite;
	animation: cloudSmall 165s infinite;
}
.cloud.medium {
	z-index: 3;
	top: 25%;
	left: 30%;
	background: url(images/cloudMedium.png) no-repeat no-repeat center;
	height: 92px;
	width: 159px;
	-webkit-animation: cloudMedium 80s infinite;
	-moz-animation: cloudMedium 80s infinite;
	-o-animation: cloudMedium 80s infinite;
	animation: cloudMedium 80s infinite;
}
.cloud.large {
	z-index: 2;
	top: 5%;
	right: 15%;
	background: url(images/cloudLarge.png) no-repeat no-repeat center;
	height: 169px;
	width: 302px;
	-webkit-animation: cloudLarge 105s infinite;
	-moz-animation: cloudLarge 105s infinite;
	-o-animation: cloudLarge 105s infinite;
	animation: cloudLarge 105s infinite;
}
 @keyframes cloudSmall {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @keyframes cloudMedium {
 0% {
 left: -8%;
}
 100% {
 left: 108%;
}
}
 @keyframes cloudLarge {
 0% {
 right: -18%;
}
 100% {
 right: 118%;
}
}

气球的漂浮

接下来是气球的漂浮，可适当的给予摇摆的动作。

.balloon {
	position: absolute;
	z-index: 3;
	top: 5%;
	right: 20%;
	background: url(images/balloon.png) no-repeat no-repeat center;
	height: 227px;
	width: 157px;
	-webkit-animation: balloon 30s infinite cubic-bezier(0.91, 0.01, 1, 0.89);
	-moz-animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5);
	-o-animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5);
	animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5);
}
 @keyframes balloon {
 0% {
 right: -20%;
 transform: rotate(0deg);
}
 5% {
 right: -20%;
 transform: rotate(0deg);
}
 25% {
 transform: rotate(0deg);
}
 100% {
 right: 120%;
 transform: rotate(-30deg);
}
}

到这里，我们的动画效果基本已经完成了，其中需要添加浏览器前缀的请自行添加。或者下载我们的附件参看完整的css源代码。

三、城市场景组成图片

最后，就是我们城市场景的图片组件了。

.skyline {
	position: absolute;
	z-index: 5;
	width: 100%;
	bottom: 26%;
	background: url(images/skyline.png) repeat no-repeat;
	height: 147px;
}
.beans {
	position: absolute;
	z-index: 4;
	height: 201px;
	width: 88px;
	bottom: 30%;
	left: 50%;
	background: url(images/beans.png) no-repeat no-repeat;
}
.ground {
	position: absolute;
	width: 100%;
	bottom: 0;
}
.ground.front {
	z-index: 30;
	background: url(images/groundFront.png) repeat no-repeat center;
	height: 301px;
}
.ground.mid {
	z-index: 20;
	background: url(images/groundMid.png) repeat no-repeat;
	height: 299px;
}
.ground.back {
	z-index: 10;
	background: url(images/groundBack.png) repeat no-repeat center;
	height: 281px;
}
.dowEventCenter {
	position: absolute;
	z-index: 12;
	bottom: 20%;
	left: 5%;
	background: url(images/dowEventCenter.png) no-repeat no-repeat center;
	height: 236px;
	width: 524px;
}
.planetarium {
	position: absolute;
	z-index: 12;
	bottom: 18%;
	right: 10%;
	background: url(images/Planetarium.png) no-repeat no-repeat center;
	height: 285px;
	width: 347px;
}
.friendshipShell {
	position: absolute;
	z-index: 21;
	bottom: 18%;
	left: 20%;
	background: url(images/friendshipShell.png) no-repeat no-repeat center;
	height: 370px;
	width: 231px;
}
.glockenspiel {
	position: absolute;
	z-index: 11;
	bottom: 26%;
	right: 50%;
	background: url(images/Glockenspiel.png) no-repeat no-repeat center;
	height: 263px;
	width: 137px;
}

There are also some more interesting examples. I didn't look at them carefully. The addresses are as follows. I will look at them later when I have time.

http://www.jiawin.com/css3-dream-lotus-blooming