.fade-in { margin-top: 25px; font-size: 21px; text-align: center; animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; /* Safari and Chrome */ -o-animation: fadein 1s; /* Opera */ } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity: 0; } to { opacity: 1; } } .fade-left { margin-top: 25px; font-size: 21px; text-align: center; animation: fadeleft 1s; -moz-animation: fadeleft 1s; /* Firefox */ -webkit-animation: fadeleft 1s; /* Safari and Chrome */ -o-animation: fadeleft 1s; /* Opera */ } @keyframes fadeleft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @-moz-keyframes fadeleft { /* Firefox */ from { opacity: 0; -moz-transform: translateX(-20px); } to { opacity: 1; -moz-transform: translateX(0); } } @-webkit-keyframes fadeleft { /* Safari and Chrome */ from { opacity: 0; -webkit-transform: translateX(-20px); } to { opacity: 1; -webkit-transform: translateX(0); } }