CSS Animation Flash Cards

setting a transition time for a single property

transition: width 2s

changing the easing for a transition

transition-timing-function: linear

delaying a transition

transition-delay: 5s

making a keyframes animation with a start and end

@keyframes animation {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

making a keyframes animation with more than 2 keyframes

@keyframes animation {
	0% {
		color: #000;
	}
	25% {
		color: #aaa;
	}
	100% {
		color: #fff
	}
}

giving an animation to an element

.animated {
	animation-name: animation;
	animation-duration: 3s;
}

making an element animate then smoothly go back in reverse

.animated {
	animation-name: animation;
	animation-duration: 2s;
	animation-iteration-count: 2;
	animation-direction: alternate;
}

making an element keep its new properties after an animation is over

animation-fill-mode: forwards;