Introduction: This page will be covering animations in CSS! What Are Animations In CSS? Animations are when an object performs a movement or property change over time. In CSS this can be done through a variety of properties. These animations could be useful to add a whole range of interaction to users viewing your website or to gain affection and attraction from the user. Structure: animation:{animation} {time}; -webkit-animation:{animation} {time}; /* Safari and Chrome */ @keyframes {name} { from {background:red;} to {background:yellow;} } @-webkit-keyframes {name} /* Safari and Chrome */ { from {background:red;} to {background:yellow;} } Example:
  1. div
  2. {
  3. width:100px;
  4. height:100px;
  5. background:red;
  6. animation:myfirst 5s;
  7. -webkit-animation:myfirst 2s; /* Safari and Chrome */
  8. }
  10. @keyframes myfirst
  11. {
  12. from {background:red;}
  13. to {background:yellow;}
  14. }
  16. @-webkit-keyframes myfirst /* Safari and Chrome */
  17. {
  18. from {background:red;}
  19. to {background:yellow;}
  20. }
Possible Animation Properties: @keyframes - Specifies the animation. animation - A shorthand property for all the the animation properties, except the animation-play-state property. animation-name - Specifies the name of the @keyframes animation. animation-duration - Specifies how many seconds or milliseconds an animation takes to complete one cycle. animation-timing-function - Describes how the animation will progress over one cycle of its duration. animation-delay - Specifies when the animation will start. animation-iteration-count - Specifies the number of times an animation is played. animation-direction - Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal". animation-play-state - Specifies whether the animation is running or paused. Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...
  1. class='myClass'
... to the attributes of that element if you chose a class, or...
  1. id='myID'
if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...
  1. .myClass {
  2. //Properties go here
  3. }
if you chose a class, or...
  1. #myID {
  2. //Properties go here
  3. }
(You can remove the line beginning with // if you wish). Here's an example...
  1. <html>
  2. <head>
  3. <style>
  4. .myDiv {
  5. color: black;
  6. width: 100px;
  7. height: 100px;
  8. background-color: red;
  9. animation: myfirst 5s;
  10. -webkit-animation: myfirst 5s; // Safari and Chrome
  11. // Sets the properties of the class myDiv, then performs the animation of myfirst over 5seconds.
  12. }
  14. @keyframes myfirst
  15. {
  16. from {background:red;}
  17. to {background:yellow;}
  18. }
  20. @-webkit-keyframes myfirst // Safari and Chrome
  21. {
  22. from {background:red;}
  23. to {background:yellow;}
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class='myDiv'>This is text!</div>
  29. </body>
  30. </html>
By putting our responsive queries at the bottom of the page, we ensure that any properties we have set prior to the queries are overwritten.

Add new comment