CSS3 below Animations Animation Library sample

First, CSS3 Animation library animatable

What is CSS3 animation?

With CSS3, we can create animations that can replace animated pictures, Flash animations, and JavaScript in many Web pages.

CSS3 brings new features such as rounded corners, translucent, shaded, gradient, and multiple background maps, and easily implements the layer styles common in the design, replacing images with simple code instead of extra empty tags.

Ready-made CSS3 Animation library: http://leaverou.github.io/animatable/

Background-color

. background-color {background: #708090; animation:1s ease 0s alternate none infinite background-color;}
@keyframes background-color{
from{background: #708090;}
to{background: #000;}
}
1

Background-position

Background-position property sets the starting position of the background image, the default value: 0% 0%, the effect is equivalent to left top

Example one:

. background-position-1 {background-image:-moz-linear-gradient ( -45deg, Transparent 25%, black 25%, Black 50%, Transparent 50%, transparent 75%, black 75% and Black); background-size:50px 50px; animation:1s ease 0s alternate none infinite background-position-1;
@keyframes background-position-1{
from{background-position:0 0;}
to{background-position:100% 100%;}
}
1

Example two:

. background-position-2 {background-color: #E04332; background-repeat:repeat-x; background-size:24px 300px; Background-image:linear-gradient ( -45deg, Slategray 25%, Transparent 25%), linear-gradient (45deg, Transparent 75%, Slategray 75%), Linear-gradient (45deg, Slategray 25%, Transparent 25%), linear-gradient ( -45deg, Transparent 75%, Slategray 75%); animation:1s ease 0s alternate none infinite background-position-2;
@keyframes background-position-2{
from{background-position:3px 0, 3px 0, 15px-150px, 15px-150px;}
to{background-position:3px-70px, 3px-70px, 15px-80px, 15px-80px;
}
1

Background-size

The Background-size property sets the size of the background picture. Before CSS3, the size of the background picture is determined by the actual size of the picture. In CSS3, you can specify the size of the background picture, which allows us to reuse the background image in different environments.

. background-size {background-image:repeating-radial-gradient (transparent, transparent 9px, black 11px, black 20px); Background-position:center; animation:1s ease 0s alternate none infinite background-size;
@keyframes background-size{
from{background-size:5px 5px;}
to{background-size:150px 150px;}
}
1

Border-radius

The Border-radius property is a shorthand property that is used to set four Border-*-radius properties.

Example One

. border-radius-1 {animation:1s ease 0s alternate none infinite border-radius-1;
@keyframes border-radius-1{
from{border-radius:0;}
to{border-radius:50%;}
}
1

Example Two

. border-radius-2 {animation:1s ease 0s alternate none infinite border-radius-2;
@keyframes border-radius-2{
from{border-radius:0 100%;}
to{border-radius:100% 0;}
}
1

Border-width

Example One

. border-width-1 {border-style:solid; border-color:black animation:1s ease 0s alternate none infinite border-width-1;}
@keyframes border-width-1{
from{border-width:0;}
to{border-width:75px;}
}
1

Example Two

. border-width-2 {border-style:dashed; border-color:black animation:1s ease 0s alternate none infinite border-width-2;}
@keyframes border-width-2{
from{border-width:0;}
to{border-width:35px;}
}
1

Example Three

. border-width-3 {border-style:double; border-color:black animation:1s ease 0s alternate none infinite border-width-3;}
@keyframes border-width-3{
from{border-width:0;}
to{border-width:75px;}
}
1

Box-shadow

Box-shadow property to add one or more shadows to a box

Example One

. box-shadow-1 {animation:1s ease 0s alternate none infinite box-shadow-1;
@keyframes box-shadow-1{
from{box-shadow:0 0 black;}
to{box-shadow:0 150px 10px-50px Rgba (0,0,0,.5);}
}
1

Example Two

. box-shadow-2 {animation:1s ease 0s alternate none infinite box-shadow-2;
@keyframes box-shadow-2{
from{Box-shadow:none;}
to{box-shadow:inset-75px-75px 400px #000;}
}
1

Example Three

. box-shadow-3 {box-radius:1px animation:1s ease 0s alternate none infinite box-shadow-3;}
@keyframes box-shadow-3{
from{box-shadow:inset 0 0 75px 75px slategray, 0 0 0 Slategray;}
to{box-shadow:inset 0 0 35px 35px Transparent, 0 0 75px 50px Transparent;}
}
1

Color

The CSS3 Color property adds a HSL attribute to the traditional hex and RGB values, which adds opacity (transparency) and alpha channels

. color {animation:1s ease 0s alternate none infinite color;
@keyframes color{
from{Color:white;}
to{Color:black;}
}
1

Font-size

. font-size {animation:1s ease 0s alternate none infinite font-size;
@keyframes font-size{
from{font-size:60px;}
to{font-size:300px;}
}
1

Width

. width {animation:1s ease 0s alternate none infinite width;
@keyframes width{
from{width:150px;}
to{width:330px;}
}
1

Height

. height {animation:1s ease 0s alternate none infinite height;}
@keyframes height{
from{height:150px;}
to{height:0;}
}
1

Letter-spacing

. letter-spacing {animation:1s ease 0s alternate none infinite letter-spacing;
@keyframes letter-spacing{
from{letter-spacing:0;}
to{letter-spacing:100px;}
}
1

Line-height

. line-height {animation:1s ease 0s alternate none infinite line-height;
@keyframes line-height{
from{line-height:10px;}
to{line-height:300px;}
}
1

Opacity

. opacity {animation:1s ease 0s alternate none infinite opacity;
@keyframes opacity{
from{opacity:1;}
to{opacity:0;}
}
1

Outline-width

. outline-width {outline-color:black; outline-style:solid animation:1s ease 0s alternate none infinite outline-width;}
@keyframes outline-width{
from{outline-width:0;}
to{outline-width:100px;}
}
1

Outline-offset

. outline-offset {outline-style:dashed outline-color:slategray animation:1s ease 0s alternate none infinite outline-of Fset;}
@keyframes outline-offset{
from{outline-offset:-5px;}
to{outline-offset:30px;}
}
1

Outline-color

. outline-color {outline-width:30px; outline-style:solid animation:1s ease 0s alternate none infinite outline-color;}
@keyframes outline-color{
from{outline-color:transparent;}
to{outline-color:red;}
}
1

Padding

. padding {animation:1s ease 0s alternate none infinite padding;
@keyframes padding{
from{padding:0;}
to{padding:0 200px 0 50px;}
}
1

Text-indent

. text-indent {animation:1s ease 0s alternate none infinite text-indent;
@keyframes text-indent{
from{text-indent:0;}
to{text-indent:100px;}
}
1

Text-shadow

Example One

. text-shadow-1 {animation:1s ease 0s alternate none infinite text-shadow-1;
@keyframes text-shadow-1{
from{text-shadow:0 0 black;}
to{text-shadow:20px 20px 10px rgba (0,0,0,.5);}
}
1

Example Two

. text-shadow-2 {color:transparent animation:1s ease 0s alternate none infinite text-shadow-2;}
@keyframes text-shadow-2{
from{text-shadow:0 0 0 White;}
to{text-shadow:0 0 10px White;}
}
1

Example Three

. text-shadow-3 {color:transparent animation:1s ease 0s alternate none infinite text-shadow-3;}
@keyframes text-shadow-3{
from{text-shadow:0 0 White;}
to{text-shadow:0 0 Rgba (255,255,255,0), -45px-45px 0 red, -30px-30px 0 orange, -15px-15px 0 yellow, 0 0 0 Green, 15px 15px 0 Blue, 30px 30px 0 Indigo, 45px 45px 0 violet;
}
1

Top

. Top {position:relative animation:1s ease 0s alternate none infinite top;}
@keyframes top{
from{top:0;}
to{top:100px;}
}
1

Transform

Example One

. transform-1 {animation:1s ease 0s alternate none infinite transform-1;
@keyframes transform-1{
from{transform:rotate (0deg);}
to{transform:rotate (360deg);}
}
1

Example Two

. transform-2 {animation:1s ease 0s alternate none infinite transform-2;
@keyframes transform-2{
from{Transform:scale (1);}
to{Transform:scale (2);}
}
1

Example Three

. transform-3 {animation:1s ease 0s alternate none infinite transform-3;
@keyframes transform-3{
from{Transform:skew (0);}
to{Transform:skew (180deg);}
}
1

Example Four

. transform-4 {animation:1s ease 0s alternate none infinite transform-4;
@keyframes transform-4{
from{transform:rotate (0) scale (1);}
to{transform:rotate (360deg) scale (0);}
}
1

Example Five

. transform-5 {animation:1s ease 0s alternate none infinite transform-5;
@keyframes transform-5{
from{transform:perspective (400px) rotatey (0);}
to{transform:perspective (400px) Rotatey (360deg);}
}
1

Example Six

. transform-6 {animation:1s ease 0s alternate none infinite transform-6;
@keyframes transform-6{
from{transform:perspective (400px) Rotatex (0);}
to{transform:perspective (400px) Rotatex (360deg);}
}
1

Example Seven

. transform-7 {animation:1s ease 0s alternate none infinite transform-7;
@keyframes transform-7{
from{transform:perspective (400px) rotatey (0);}
to{transform:perspective (400px) Translatez (150px) Rotatey (180deg);
}
1

Example Eight

. transform-8 {animation:1s ease 0s alternate none infinite transform-8;
@keyframes transform-8{
from{transform:perspective (400px) Translate3d (0,0,0) Rotatex (0) rotatey (0) rotatez (0);
to{transform:perspective (400px) Translate3d (0,0,-5000px) Rotatex (720deg) Rotatey (360deg) Rotatez ( -360deg);
}
1

Example Nine

. transform-9 {animation:1s ease 0s alternate none infinite transform-9;
@keyframes transform-9{
from{transform:perspective (400px) Rotate3d (. 5,.5,0,0deg);}
to{transform:perspective (400px) Rotate3d (. 5,.5,0,180deg);}
}
1

Example Ten

. transform-10 {transform-origin:100% 50% animation:1s ease 0s alternate none infinite transform-10;}
@keyframes transform-10{
from{transform:perspective (400px) Rotate3d (0,1,0,0deg);}
to{transform:perspective (400px) Rotate3d (0,1,0,-180deg);}
}
1

Example Xi.

. transform-origin {transform:rotate (45deg); animation:1s ease 0s alternate none infinite transform-origin;}
@keyframes transform-origin{
from{transform-origin:50% 50%;}
to{transform-origin:0 100%;}
}