The demos used here are very functional, but imagine the doors to decorative typography this could open up! In principle we’ll be free to use many familiar properties on the initial letter, including:
- All familiar font properties
- Color and opacity
- Text-shadow and other text decoration
- Transform properties
- and how about some background-clip action?
This got me thinking about using css for movement in general. Which got me thinking about how movement using css, in the wrong hands, could really ruin the user experience.
So down the dark alley I went, going on about CSS animation
div {
animation-duration: 2s;
animation-name: bounceIn;
}
@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
This led me to more css animation examples. I created this slider animation for text. It just slides from lefto to right, once:
/* Standard syntax */
animation-name: slideIn 10s;
@keyframes slideIn {
0% {left:0px; top:0px;}
25% {left:50px; top:0px;}
50% {left:125px; top:0px;}
75% {left:225px; top:0px;}
100% {left:350px; top:0px;}
}
It is here, when testing on 3 browsers: Firefox, Chrome and Opera, that the age old serpent comes up and bites me. They don’t behave the same!
At least this is fun to learn, if not so useful.
Stuff to learn:
https://webdesign.tutsplus.com/articles/get-started-with-web-animation–cms-26848
https://cssanimation.rocks/why-animate/
http://webdesign.tutsplus.com/courses/practical-web-animation