Animate your Html with css animations, amazing svg and a bit of javascript...
The rest of the chapter is down
Use the keydown key to navigate through all slides.
The CSS used to format the content, but it can also be used to create forms or animate clips
A demo for understanding
Some tips to optimize its code
Use these attributes to reduce the lines of code in html and css...
<div class="part1"></div>
<div class="part2"></div> // Or <div class="part"></div>
<div class="part3"></div>
.part1 {} .part {}
.part2 {} .part:before{}
.part3 {} .part:after{}
use :after and :before to simplify the code
demo and code here : http://ow.ly/PUXg5Discover some transitions
.square {
background: #fafafa;
opacity: 0;
animation: appear 3s linear infinite;
animation-fill-mode:forwards;
}
@keyframes appear {
from {opacity: 0;}
to {opacity:1;}
}
.transition {
animation: transition 5s linear infinite;
animation-fill-mode:forwards;
}
@keyframes transition {
from {background-color:#27ae60;}
to {
background-color: #2ecc71;
border-radius: 50%;
}
}
.transformation {
position: relative;
animation: transformation ease-in-out 3s infinite alternate;
animation-fill-mode:forwards;
}
@keyframes transformation {
from {left: 0%; -webkit-transform: scale(1.0) rotate(0deg) }
50% {left: 45%; -webkit-transform: scale(0.8) rotate(10deg) }
to {left: 90%; -webkit-transform: scale(1.2) rotate(-20deg) }
}
}
.hover-anim {
background-color: #c0392b;
transition: all 0.4s ease;
cursor:pointer;
}
.hover-anim:hover {
background-color: #e74c3c;
border-radius: 50%;
transform: scale(1.2);
}
.delay {
opacity: 0;
background-color: #8e44ad;
animation: delay 5s linear;
animation-delay: 3s;
animation-fill-mode:forwards;
}
@keyframes delay {
from {
opacity:0;
}
to {
opacity: 1;
background-color: #9b59b6;
border-radius: 50%;
}
}
transition: //duration, mode (linear), infinite ?
transition-delay: //delay before the animation
transition-duration: // duration of the animation
transition-timing-function: type of animation (ease, linear, cubic-bezier)
transition-property: // what is the element of the animation (background, transform...)
animation:
animation-delay / duration / timing-function: // delay, duration, timing-function, same as transitions
animation-name: foo => @keyframes foo { from {} to {}} // name of the animation
animation-direction: // direction
animation-fill-mode: // what state at the end of the animation
animation-iteration-count: // number of repetition
transform: rotate // rotate(60deg) rotate the element 0deg to 360deg
transform: scale // scale(1.0) increase or decrease the size of the element
transform: skew // skew give an angle and tranform the element
transform: translate // move an element
transform: matrix // combine all the methods in One
.cube
{
position: relative;
left: 0px;
top: 0px;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
transform-style: preserve-3d;
animation: rotate-cube 15s linear infinite;
}
.cubeface
{
position: absolute;
transition: all 600ms;
top: 15px;
left: 15px;
}
@keyframes rotate-cube
{
from
{
transform: rotateZ(0Deg) rotateY(0Deg);
}
to
{
transform: rotateZ(1080Deg) rotateY(360Deg);
}
}
#f1 {
width: 200px;
height: 200px;
background-color:#1abc9c;
opacity: 0.7;
transform: translateZ(150px);
}
#f2 {
width: 200px;
height: 200px;
background-color: #2ecc71;
opacity: 0.7;
transform: translateX(150px) rotateY(90Deg);
}
#f3 {
width: 200px;
height: 200px;
background-color: #3498db;
opacity: 0.7;
transform: translateX(-150px) rotateY(-90Deg);
}
#f4 {
width: 200px;
height: 200px;
background-color: #9b59b6;
opacity: 0.7;
transform: translateZ(-150px);
}
#f5 {
width: 200px;
height: 200px;
background-color: #f1c40f;
opacity: 0.7;
transform: translateY(150px) rotateX(90Deg);
}
#f6 {
width: 200px;
height: 200px;
background-color: #e67e22;
opacity: 0.7;
transform: translateY(-150px) rotateX(-90Deg);
}
:hover > #f1 {
transform: translateZ(250px);
}
:hover > #f2 {
transform: translateX(250px) rotateY(90Deg);
}
:hover > #f3 {
transform: translateX(-250px) rotateY(-90Deg);
}
:hover > #f4 {
transform: translateZ(-250px);
}
:hover > #f5 {
transform: translateY(250px) rotateX(90Deg);
}
:hover > #f6 {
transform: translateY(-250px) rotateX(-90Deg);
}
div {
transform: rotateX(150deg);
}
div {
transform: rotateY(130deg);
}
div {
transform: rotateZ(90deg);
}
transform: // Applies a 2D or 3D transformation to an element
transform-origin: // Allows you to change the position on transformed elements
transform-style: // Specifies how nested elements are rendered in 3D space
perspective: // Specifies the perspective on how 3D elements are viewed
perspective-origin: // Specifies the bottom position of 3D elements
backface-visibility: // Defines whether or not an element should be visible when not facing the screen
matrix3d :
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) // Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d: (x,y,z) // Defines a 3D translation
translateX: (x) // Defines a 3D translation, using only the value for the X-axis
translateY: (y) // Defines a 3D translation, using only the value for the Y-axis
translateZ: (z) // Defines a 3D translation, using only the value for the Z-axis
scale3d: (x,y,z) // Defines a 3D scale transformation
scaleX: (x) // Defines a 3D scale transformation by giving a value for the X-axis
scaleY: (y) // Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ: (z) // Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d: (x,y,z,angle) // Defines a 3D rotation
rotateX: (angle) // Defines a 3D rotation along the X-axis
rotateY: (angle) // Defines a 3D rotation along the Y-axis
rotateZ: (angle) // Defines a 3D rotation along the Z-axis
perspective: (n) // Defines a perspective view for a 3D transformed element