"CSS Animations Kickstarter"

JSPub 2.0 Presentation

by Vlad & Joao

CSS Animations

- Configuring the animation -

animation-duration: 2s;

animation-timing-function: ease-in;

ease-in
ease-out
linear

animation-delay: 0s;

animation-iteration-count: infinite;

animation-direction: normal;

normal
reverse
alternate

animation-fill-mode: backwards;

animation-play-state: running;

animation-name: circleAnimation;

animation: 2s ease-in 0s infinite normal backwards running circleAnimation;

- Creating the animation steps -

@keyframes circleAnimation {
	0% {
		border-color: #094a49;
	}
	50% {
		border-color: #00fffc;
	}
	100% {
		transform: rotate(-360deg);
		border-color: #094a49;
	}
}
		
Slides:
joao1 joao2