Matrix Animation with WebKit CSS3
I tweaked the WebKit CSS3 Animation example I made last time to create this “Matrix” animation for fun.
This is the screen capture of the animation on Safari 4.
You can try
the actual HTML page and see it working on current WebKit Nightly build or Safari 4.
To display the Katakana characters, I used @font-face rule to embed a Katakana dingbat-like font, rather than using an actual Japanese input.
Although I wanted display the kanakana vertically with using writing-mode: tb-rl, which I believe has been proposed for CSS2, this is not supported on Webkit so I had to use -webkit-transform to rotate each div to 90 degree to display vertically.
This way, each letter faces 90 deg angle too, but oh well, this Japanese letters are random, used only for visual purpose and don’t mean anything so I guess this doesn’t matter for now.
Let’s take a look at some of the CSS3 code, I am showing only important parts so if you would like to view the entire code, just open up the htmlpage and use Webkit’s inspector!
Embed A Katakana Font
@font-face {
font-family: Katakana;
src: url('MoonBeams-katakana_.TTF');
}
#matrix{
font-family: Katakana; /* use the embedded font */
position: absolute;
... (more styles here) ...
}
@font-face rule is not supported by older Safari including iPhone.
On supported browsers, you should be able to use either TrueType (.ttf) or OpenType (.otf).
Define Animations
@-webkit-keyframes fade{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes fall{
from {top: -250px;}
to {top: 300px;}
}
I used both % and from/to keywords. But with %, you can define in-between state.
Rotate the Katakana Strings
#matrix div{
position: absolute;
top: 0;
-webkit-transform-origin: 0%;
-webkit-transform: rotate(90deg);
...
By setting -webkit-transform-origin as 0%, the div block rotates 90 degrees at the far left.
If you don’t set this, by default, it rotates at center axis.
…and Use the Defined Animations
#matrix div{
...
-webkit-animation-name: fall, fade;
-webkit-animation-iteration-count: infinite; /* use 0 to infinite */
-webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
-webkit-animation-timing-function: ease-out;
}
For more detailed info on -webkit-animation properties, read Apple’s Developer Connection
Again, this example is currently working only on the latest WebKit and Safari 4 (not iPhone).
Google Chrome does not support @font-face or animation. (-webkit-transform:rotate... works), and I assume it does not work on Android either.
(And I have no intention to try on other WebKit-base browsers like S60).
Short story: keeping my website since 1996, finally started this blog in 2007.
Long story: see "
December 14th, 2009 at 4:41 pm
correction – for “fall” animation, you should use translate, instead of position. (e.g. top to bottom movement should be used with -webkit-translateY).
smfr from Apple gave me this tip a while ago and forgot to correct on my blog. sorry!!!
January 13th, 2010 at 10:09 am
[...] The Matrix [...]
January 13th, 2010 at 9:34 pm
It doesn’t work on my Firefox 3.5.7 for Mac
January 13th, 2010 at 10:43 pm
yeah, this demo is only for WebKit-based browsers because mozilla browsers do not support the animation with keyframes!
January 18th, 2010 at 12:20 am
[...] 黑客帝国：教程 | 演示地址 [...]
January 31st, 2010 at 12:16 am
[...] The Matrix [...]
February 1st, 2010 at 12:24 pm
Sorry guys I know it sucks but this is Webkit-only (Safari, Chrome etc.) demo.
February 1st, 2010 at 12:40 pm
Nice example. Love a bit of the Matrix.
February 3rd, 2010 at 2:14 pm
just checked with a forked version of chrome (iron) on windows, worked as expected (webkit 532.8)
February 18th, 2010 at 2:45 am
[...] Matrix Animation with Webkit CSS3 | Demo This one is pretty cool. If you are a fan of Matrix, check out this example. [...]
March 21st, 2010 at 3:52 am
[...] falling symbols display of the Matrix in encoded form has been recreated in CSS3 by GirlieMac!. It uses the WebKit CSS3 animation properties, plus she’s also used @font-face to pull in a [...]
April 8th, 2010 at 11:24 am
[...] [...]
April 20th, 2010 at 1:17 am
Stumbled this blog post, bless you.
April 22nd, 2010 at 12:20 am
Matches the screen shot in Chrome 5.0.375.6 dev
May 8th, 2010 at 8:59 pm
Very nice. It does work in Chrome on Windows.
June 6th, 2010 at 1:42 pm
It works in android too (HTC Hero).
June 6th, 2010 at 2:53 pm
Awesome! I don’t have an Android running device to test for myself! Thanks for letting me know.
June 17th, 2010 at 7:49 am
[...] The Matrix – Create cool and effective matrix-like animation with CSS3! It is a good example how CSS3-based animations can work! [...]
June 25th, 2010 at 1:20 am
Good! and it works also on Chorme on Ubuntu!
June 25th, 2010 at 6:10 am
Very Nice! If the alpha could change per character, it would almost look authentic!
July 7th, 2010 at 4:28 pm
[...] Here is a demo featuring a Matrix type effect using some CSS3. I didn’t have any luck viewing this one in Firefox, but it worked just fine in Chrome. Find out more about this demo here. [...]