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

204 views