css3 animation for beginners - imrokraft
TRANSCRIPT
![Page 1: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/1.jpg)
IMROKRAFTCrafting the futurePh.no:(0471)6555744
Site: http://www.imrokraft.com/
Akhil Krishnan R S
Arun Solomon
Imrokraft Solution
![Page 2: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/2.jpg)
CSS3 ANIMATION• CSS3 Animation is a new concept which allow animation on html
elements without the support of JavaScript or Flash.• Using animation we can gradually change from one style to another.• For using css3 animation we need to specify “@keyframes”• @keyframes specifies the styles of html element for each state.• Only the animation properties are get active inside the @keyframes.
![Page 3: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/3.jpg)
EXAMPLE<style>@keyframes anim1 // anim1 is the name of animation{from{background-color:red;}to{background-color:green;}.box // box, which is div want the animation {animation-name:anim1;animation-duration:2s;animation-iteration-count:20;}</style>
![Page 4: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/4.jpg)
DIFFERENT ANIMATION PROPERTIES
![Page 5: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/5.jpg)
animation• Animation is a shorthand property of 8 more other animation
property. That are
• animation-name • animation-duration• animation-timing-function• animation-delay• animation-iteration-count• animation-direction• animation-fill-mode• animation-play-state
![Page 6: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/6.jpg)
animation-delay: 3s;delay to start
animation-direction: alternate;animation is played in reverse on odd iterations
animation-duration: 3s;time to complete animation
animation-iteration count: 3s;time to play animation
animation-name: myAnimation;unique id for a specified animation
animation-play-state: paused;paused/plays the animation
animation-timing-function: cubic-Bezier(x1,y1,x2,y2);a custom/predefined timing curve to follow
![Page 7: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/7.jpg)
CSS3 TRANSFORM• CSS3 transforms allows you to translate, rotate, scale and skew
elements.• CSS3 have two type of transforms 2D and 3D transformations.• It changes shape, size and position.• Methods used in 2D and 3D Transforms
• translate()• rotate()• scale()• skew()• matrix()
![Page 8: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/8.jpg)
2D Transforms
![Page 9: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/9.jpg)
translate()• translate() method can moves the
element from its current position to another.
Eg:@keyframes mymove { from{0px,0px;} to {0px,100px;}}
(0px,0px;) (0px, 100px;)
![Page 10: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/10.jpg)
rotate()rotate() method for rotating the elements to the clockwise and anti-clockwise direction
Eg:from{transform: rotate(0deg);}to{transform: rotate(45deg);} rotate(0deg) rotate(45deg)
![Page 11: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/11.jpg)
scale()scale() method increase or decrease the size of element.
Eg:from{transform: scale(1);}to{transform: scale(2);}
scale(1);
scale(2);
![Page 12: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/12.jpg)
skew()skew() method skews the element along the x & y axis.
Eg:from{transform: skew(0deg); }to(transform: skew(20deg);} skew(0deg); skewX(20deg);
![Page 13: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/13.jpg)
matrix()The matrix() method combines all the transform methods into one.
Eg:transform: matrix(1, 0, 0.5, 1, 150, 0); matrix(1,0,0.5,1,0.5,0);
![Page 14: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/14.jpg)
3D Transform
![Page 15: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/15.jpg)
translateX(), translateY(), translateZ()translate() method can moves the element from its current position to another.
Eg:@keyframes mymove { 0% {top:0px left 0px;} 25% {top:0px left 100px;} 50%{top:100px left 100px;} 75%{top:100px left 0px;} 100%{top:0px left:0px}}
(top 0px,left 0px;) (top 0px,left 100px;)
(top 100px,left 0px;) (top 100px,left 100px;)
![Page 16: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/16.jpg)
rotateX(), rotateY(), rotateZ(), rotateX() method rotates an element around its x-axis. rotateY to its y-axis and rotate to its z-axis
Eg:from{transform: rotateX(0deg);}to{transform: rotateX(150deg);}
rotateX(0deg) rotateX(150deg)
![Page 17: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/17.jpg)
scaleX(), scaleY(), scaleZ()To change the scale of the element by setting specific scaling factors in each of the x, y, and z directions.
Eg:from{transform: scaleX(1);}to{transform:scaleX(2);}
scale(1);
scale(2);
![Page 18: CSS3 Animation for beginners - Imrokraft](https://reader036.vdocuments.us/reader036/viewer/2022081900/5884405c1a28aba8438b4ebb/html5/thumbnails/18.jpg)