Animations

Submitted by Yorkiebar on Wednesday, January 29, 2014 - 09:29.

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:

div
{
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;
        -webkit-animation:myfirst 2s; /* Safari and Chrome */
}
 
@keyframes myfirst
{
        from {background:red;}
        to {background:yellow;}
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
        from {background:red;}
        to {background:yellow;}
}

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...

class='myClass'

... to the attributes of that element if you chose a class, or...

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...

.myClass {
        //Properties go here
}

if you chose a class, or...

#myID {
        //Properties go here
}

(You can remove the line beginning with // if you wish). Here's an example...

<html>
        <head>
                <style>
                        .myDiv {
                                color: black;
                                width: 100px;
                                height: 100px;
                                background-color: red;
                                animation: myfirst 5s;
                                -webkit-animation: myfirst 5s; // Safari and Chrome
                                // Sets the properties of the class myDiv, then performs the animation of myfirst over 5seconds.
                        }
                        
                        @keyframes myfirst
                        {
                                from {background:red;}
                                to {background:yellow;}
                        }
                        
                        @-webkit-keyframes myfirst // Safari and Chrome
                        {
                                from {background:red;}
                                to {background:yellow;}
                        }
                </style>
        </head>
        <body>
                <div class='myDiv'>This is text!</div>
        </body>
</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

242 views