ANIMATIONS

CSS Tricks

What is a CSS3 animation?

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

	/* The animation code */
	
	@keyframes example {
	    from {background-color: red;}
	    to {background-color: yellow;}
	}

	/* The element to apply the animation to */

	div.squareanim {
	    width: 200px;
	    height: 200px;
	    margin:0 auto;
	    animation-name: example;
	    animation-duration: 4s;
	    animation-iteration-count: infinite;
	}

	  				

Let's take a look at the code

		/* The animation code */
		
		@keyframes fadeBounce {

			0% {
				opacity:0;
				transform:translateY(-200%);
			}

			40% {
				transform:translateY(0);
			}

			55% {
				transform: translateY(-6px);
			}

			70% {
				opacity:1;
				transform: translateY(0);
			}

			85% {
				transform:translateY(-3px);
			}

			100% {
				opacity:1;
				transform:translateY(0);
			}

		}

		/* The element to apply the animation to */

		.box-a {
			opacity: 0;
			animation-name: fadeBounce;
			animation-duration: 1s;
			animation-fill-mode: forwards;
			background-color: #e7eff5;
			padding: 20px 20px 0 20px;
			border: 2px solid #d3dee7;
			margin-bottom: 30px;
			box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, .10);
			border-radius: 10px;
		}

		section.website-reference .boxes :nth-child(2) .box-a {
			animation-delay: .5s;
		}

		section.website-reference .boxes :nth-child(3) .box-a {
			animation-delay: 1s;
		}

		section.website-reference .boxes :nth-child(4) .box-a {
			animation-delay: 1.5s;
		}

LET'S CHANGE THE DURATION

I just added these 2 lines to all the boxes

				animation-iteration-count: infinite;
				animation-direction: alternate;
					
					

So easy!

		animation: fadeBounce 1s infinite alternate forwards;
		-webkit-animation: fadeBounce 1s infinite alternate forwards;
					
					

She's moving

		/* The animation code */

		@keyframes slideSpintwo {

			100%{
				transform: translateX(300%);
			}

		}
		
		/* The element to apply the animation to */

		section.website-reference .star3 {
			animation: slideSpintwo 2s;
			-webkit-animation: slideSpintwo 2s;
		}
					
					

FINAL CODE

	/* The animation code */
	
	@keyframes slideSpin {

		50%{
			transform: translateX(150%) scale(.5);
		}
		
		75% {
			transform: translateX(150%) rotate(180deg) scale(.5);
		}

		100%{
			transform: translateX(300%) rotate(180deg);
		}

	}
	
	/* The element to apply the animation to */
	
	.star {
		-webkit-animation: slideSpin 2s infinite alternate forwards;
		animation: slideSpin 2s infinite alternate forwards;
		width: 25%;
		height: auto;
	}						

END