CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More. The following is a guest post by Zach Saucier. Zach cooks up some pretty inspiring animations over on CodePen. I couldn't be happier that he wanted to share some of the tricks he uses to create them, especially because they are things we all strive for: efficiency, reusability, practicality, and speed. I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it could do. I'd like to share them with you. #1) Jump to another state mid-animation CSS animation makes it easy to transition properties to a new value over time.
The following is an extreme example of this, toggling opacity and a text-shadow to mimic a flickering billboard light. #2) Negative animation delays A positive animation delay is where the animation waits a certain amount of time to begin. . #3) Proportional animations. Rollers #2 (infinitely unwrap/ wrap prisms) Create Your Own @font-face Kits.
The Shapes of CSS. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after pseudo-elements in CSS, which give us the potential of two more shapes we can add to the original element.
These days, you’re best bet for drawing shapes is either SVG or using a clip-path in CSS, which is SVG-like (and can reference SVG). Triangle Bottom Left Shape Triangle Bottom Right Shape Cut Diamond Shape via Alexander Futekov. CSS3 Shapes. CSS polyfills from the future | GSS. Demo - ttf2eot - Simple ttf2eot Example - Convert TrueType Fonts (TTF) to EOT (Embedded OpenType) Simple demonstration of ttf2eot usage. First create the output file $ ttf2eot < input.ttf > output.eot If that worked, you can specify the file in your CSS. Only IE understands this format, other browsers (Safari 3.x, Firefox 3.1.x, Chrome 2.x) are likely to adopt src: url("foo.ttf") format("truetype") instead.
You can use conditional comments to specify both formats, simply provide the font in both EOT and TTF format, then use conditional comments to make IE see the EOT version. This should work in IE6, IE7, IE8, Safari 3/4 and Firefox 3.1+ Note for Windows Users If you're a Windows user - this is probably not what you're looking for. You will probably feel more comfortable using "WEFT", Microsoft's own utility for handling EOT. ttf2eot is primarily for UNIX users who want to make font embedding work for IE without using Microsoft software. However, if you're certain you do wish to use ttf2eot, a command line windows binary is provided. C:\>ttf2eot.exe c:\windows\fonts\arial.ttf c:\output.eot.