Skip to main content

Animations


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. }
  9.  
  10. @keyframes myfirst
  11. {
  12. from {background:red;}
  13. to {background:yellow;}
  14. }
  15.  
  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. }
  13.  
  14. @keyframes myfirst
  15. {
  16. from {background:red;}
  17. to {background:yellow;}
  18. }
  19.  
  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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.