Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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-de...
transform
#wrap1 {
transform: rotate(30deg);
}
• translate(50px, -20px)
• rotate(45deg)
• scale(2,4)
• skew(40deg,20deg)
•...
3D transform
#wrap1 {
transform: rotateY(180deg);
}
#wrap2 {
transform: rotateX(180deg);
}
.transformed1 {
height: 130px;
...
3D transform
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;...
3D transform
.container {
width: 250px;
height: 250px;
background-color: green;
}
.visible,.hidden {
transform: rotateY(0d...
Animation
@keyframes anim {
from {margin-left:3px;}
to {margin-left:500px;}
}
#wrap1 {
animation:anim 4s 3;
}
animation-na...
Animation
@keyframes anim {
0% {
margin-left:3px;
margin-top:3px;
background-color:#7F0055;
}
30% {
margin-left:3px;
margi...
Hometask
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Css3animation

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Css3animation

  1. 1. CSS CSS3 - animation
  2. 2. transition <div id="wrap1">Hover me!</div> #wrap1 { width:200px; transition: width 4s; } #wrap1:hover { width:500px; }
  3. 3. transition #wrap1 { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; } http://www.wisdomweb.ru/editor/wweditor.php?fname=css3_transition3 transition-timing-function Description ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) ease-in Specifies a transition effect with a slow start (equivalent to cubic- bezier(0.42,0,1,1)) ease-out Specifies a transition effect with a slow end (equivalent to cubic- bezier(0,0,0.58,1)) ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic- bezier(0.42,0,0.58,1)) cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
  4. 4. 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 }
  5. 5. 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; }
  6. 6. 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% }
  7. 7. 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; }
  8. 8. Animation @keyframes anim { from {margin-left:3px;} to {margin-left:500px;} } #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; Repeat 3 times for 4sec
  9. 9. 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; } }
  10. 10. Hometask
  • devuu1

    Nov. 7, 2015

Views

Total views

1,221

On Slideshare

0

From embeds

0

Number of embeds

5

Actions

Downloads

14

Shares

0

Comments

0

Likes

1

×