Loading

Animations

Submitted by: 
Language: 

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.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.