CSS3 animation
01
April
2015





CSS Animations


We Will Be Creating Below Animation By The End Of This Post

We will be using CSS3 only for below animation and for that we will be using @keyframes and animation properties of CSS3


Start Bounce

Stop Bounce

football

Lets start by creating our markup in HTML first

We will create a container for our animation and style is accodingly

			
				<section id="animation-1-animation">
					
				</section>
			
		

and then we will add style as follow

			
				#animation-1-animation{
					width:250px;
					height:250px;
					margin-top:5px;
					border:1px solid #aaa;
					position:relative;
					background:#f1f1f1;
				}
			
		

Now we will place our Football inside of this container and style is accordingly

			
				<section id="animation-1-animation">
					<div id="animation-1-ball" >
						<img src="images/football.png" height="40">
					</div>
				</section>
			
		

and CSS for this is as follow

			
				#animation-1-ball{
					width:40px;
					height:40px;
					position:absolute;
					bottom:0;
					left:45%;
					animation:bounce 1s linear 0s infinite alternate;
				}
			
		

animation animation-name animation-duration animation-timing-function animation-delay animation-direction;

  • animation-name This is the name of the keyframes which contains our styles for animation
  • animation-duration The duration through which our animation will go through
  • animation-duration The duration through which our animation will go through
  • animation-timing-function This property is used for defining the speed curve other values are :
    1. ease – specifies an animation with a slow start, then fast, then end slowly
    2. linear – specifies an animation with the same speed from start to end
    3. ease-in – specifies an animation with a slow start
    4. ease-out – specifies an animation with a slow end
    5. ease-in-out – specifies an animation with a slow start and end
    6. cubic-bezier(x,x,x,x) – lets you define your own values in a cubic-bezier function
  • animation-direction The direction of our animation is defined here
    1. normal
    2. alternate
    3. reverse
    4. alternate-reverse
    5. initial

@keyframes This is used for defining our style which will be gradually be applied during our animations

			
				@keyframes bounce{
					to{
						transform: translateY(-200px) rotate(360deg);
					}				}
			
		



  • 829 View
  • Pin It