kuanhsuh
5/3/2017 - 5:51 AM

CSS Animation - focus-in-contract-bck

CSS Animation - focus-in-contract-bck

new_gist_file.css
content_copyfile_download
.tesla-battery h1.title-animation {
	-webkit-animation: focus-in-contract-bck 2.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-contract-bck 2.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}    


@-webkit-keyframes focus-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(300px);transform:translateZ(300px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-transform:translateZ(12px);transform:translateZ(12px);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes focus-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(300px);transform:translateZ(300px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-transform:translateZ(12px);transform:translateZ(12px);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

// Tesla h1 tutorial