Web Page Transitions Meta Tag HTML
Meta Transitions were only ever supported by Microsoft’s Internet Explorer. Firefox, Google Chrome, Safari, Opera and pretty much all of other browsers ignored these tags. NOW… the latest release of Internet Explorer also DOES NOT SUPPORT META TRANSITIONS, thus, they are effectively obsolete. We will leave this page up for posterity.
IF YOU WANT PAGE TRANSITIONS, FEAR NOT… CLICK HERE to learn how to do it with jQuery.
How Meta Transitions Used to Work
There are 25 standard transition effects that can be applied on site enter, site exit, page enter, and page exit. This page used a "blend" on enter and will use a "box out" when you leave the page as a demonstration of how these tags work. They may not be supported by every browser, so if you intend to use them, check them with different browsers.
To see how a transition works, open this page in Internet Explorer, then go visit another site, such as Google… when you leave the page you will see the “box out” transition. If you come directly to this page on transitions from another site, you will see it fade in.
Transition | Meta Tag HTML |
---|---|
Page Enter-Blend (2 sec.) | <meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)"> |
Page Exit-Box In (2 sec.) | <meta http-equiv="Page-Exit" content="revealTrans(Duration=2.0,Transition=0)"> |
Site Enter-Box Out (2 sec.) | <meta http-equiv="Site-Enter" content="revealTrans(Duration=2.0,Transition=1)"> |
Site Exit-Circle In (2 sec.) | <meta http-equiv="Site-Exit" content="revealTrans(Duration=2.0,Transition=2)"> |
Circle Out | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)"> |
Wipe Up | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> |
Wipe Down | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=5)"> |
Wipe Right | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)"> |
Wipe Left | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)"> |
Vertical Blinds | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)"> |
Horizontal Blinds | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)"> |
Checkerboard Across | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)"> |
Checkerboard Down | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)"> |
Random Dissolve | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)"> |
Split Vertical In | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)"> |
Split Vertical Out | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)"> |
Split Horizontal In | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=15)"> |
Split Horizontal Out | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)"> |
Strips Right Down | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)"> |
Strips Right Up | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)"> |
Strips Left Down | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)"> |
Strips Left Up | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)"> |
Random Bars Horizontal | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)"> |
Random Bars Vertical | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)"> |
Random | <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)"> |
Update!
Internet Explorer 9 Does Not Support Transitions
Well, leave it to Microsoft. They created the meta transition tag and meta transistions, only to abandon them. The newest release of Internet Explorer, IE9, does not support meta transitions!
jQuery Page Transitions
You can use jQuery to make page transitions. Here are two articles detailing how: