Scribd
Upload
95 views

CSS Animations Sample Codes

CSS3 transitions allow elements to change values smoothly, like width over 4 seconds. Transitions have properties for duration, timing function (like ease), and delay. Transforms include rotate, scale, skew, and matrix functions. 3D transforms work on the x and y axes. Elements can be rotated in 3D with preserve-3d and perspective to make them appear 3D. Animations define behavior with keyframes over time and can be repeated infinitely. Properties like animation-name, duration, timing function, delay, iteration count, and direction control the animation.

Uploaded by

Ella Lopez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
95 views

CSS Animations Sample Codes

CSS3 transitions allow elements to change values smoothly, like width over 4 seconds. Transitions have properties for duration, timing function (like ease), and delay. Transforms include rotate, scale, skew, and matrix functions. 3D transforms work on the x and y axes. Elements can be rotated in 3D with preserve-3d and perspective to make them appear 3D. Animations define behavior with keyframes over time and can be repeated infinitely. Properties like animation-name, duration, timing function, delay, iteration count, and direction control the animation.

Uploaded by

Ella Lopez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS

CSS3 - animation
transition
<div id="wrap1">Hover me!</div>

#wrap1 {
width:200px;
transition: width 4s;
}
#wrap1:hover {
width:500px;
}
transition
#wrap1 {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
transition-timing-function Description
Default value. Specifies a transition effect with a slow start, then fast,
ease
then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
Specifies a transition effect with the same speed from start to end
linear
(equivalent to cubic-bezier(0,0,1,1))
Specifies a transition effect with a slow start (equivalent to cubic-
ease-in
bezier(0.42,0,1,1))
Specifies a transition effect with a slow end (equivalent to cubic-
ease-out
bezier(0,0,0.58,1))
Specifies a transition effect with a slow start and end (equivalent to cubic-
ease-in-out
bezier(0.42,0,0.58,1))
Define your own values in the cubic-bezier function. Possible values are
cubic-bezier(n,n,n,n)
numeric values from 0 to 1

http://www.wisdomweb.ru/editor/wweditor.php?fname=css3_transition3
transform
#wrap1 {
transform: rotate(30deg);
}

• translate(50px, -20px)
• rotate(45deg)
• scale(2,4)
• skew(40deg,20deg)
• matrix(a, c, b, d, tx, ty) where a,d - scale, c,b - skew, tx,ty - translate

#wrap1 {
transform-origin:20% 40%; //default is 50% 50% 0
}
3D transform
#wrap1 {
transform: rotateY(180deg);
}
#wrap2 {
transform: rotateX(180deg);
}

.transformed1 {
height: 130px;
width: 220px;
background-color: green;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
.transformed2 {
height: 130px;
width: 220px;
transform: rotateY(120deg);
background-color: red;
}
3D transform
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:100px;
}

#div2 {
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
}

#div1 {
perspective-origin: 10% 10%; //default is 50% 50%
}
3D transform
.container {
width: 250px;
height: 250px;
background-color: green;
}
.visible,.hidden {
transform: rotateY(0deg);
width: 100px;
height: 100px;
margin: 5px;
background-color: red;
padding: 5px;
}
.hidden {
backface-visibility: hidden;
}
Animation
@keyframes anim {
from {margin-left:3px;}
to {margin-left:500px;}
}
Repeat 3 times for 4sec
#wrap1 {
animation:anim 4s 3;
}

animation-name: anim ;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: normal|reverse|alternate|alternate-reverse;
animation-play-state: paused|running;
Animation
@keyframes anim {
0% {
margin-left:3px;
margin-top:3px;
background-color:#7F0055;
}
30% {
margin-left:3px;
margin-top:250px;
background-color:#7F0055;
}
60% {
margin-left:500px;
margin-top:250px;
background-color:black;
}
100% {
margin-left:3px;
margin-top:3px;
background-color:#7F0055;
}
}
Hometask

You might also like