Jump to content

HTML/CSS Transitions
   (0 reviews)

Arceus
  • By popular demand, and threat of kangaroos (I jest), a couple quick tutorial-guides on how to achieve neat-o CSS transition animation effects; there are two different effects here. The concept is essentially the same, but how they operate is a little different, so I decided to write out both. Yes, it's entirely CSS and HTML, I promise. We'll be using CSS transitions to create a cool letter spacing effect, where one line spreads out and vanishes, and is replaced by a new line that fades in and pulls together. We'll also make little corners that move in and out on hover, very neat sci-fi-like effect. This will not just give you the codes, it will walk you through creating them, and assumes you have a minimal understanding of basic CSS.

    Type: Look & Feel

This is all CSS and HTML, so it should be fairly short. While this is two different effects, you can separate the two out and use them standalone. I make no promise about older browser support, but it should work in any modern browser engine. This guide should be relatively short, and it will not just hand you the coding, we're going to build it together, and I will explain transition effects and what doohickies do what and how.

 

This is what we'll be making:

hoverbanner_s.gif


The Base
This has two effects to it that I'll be teach you how to do, the first is the letter-spacing magic, and the second is the little corners that move, but first thing's first, we need a good base for what we're going to do. So, first, we're going to create a container div. Create just a div with a class, you can call the class whatever you like, mine is header_box.

<div class="header_box">
</div>

You can style this any way you like. Mine is 607px wide, 133px in height, has some positioning. I made the font color on it #BD93D2, and it's got an rgba background (45,45,45,0.8). It's also position: absolute, you will need to set it to position: relative, if you don't have need of it being absolute, because we're going to use position transitions to make the sci-fi corner things, and the interior divs for the letter-spacing effects will be position: absolute in order to align them over each other.

 

Remember that when you use position: absolute, it will contain itself automatically within the confines of whatever parent element it is nested under that happens to have a positioning defined for it first, that is not position: static (static is default), initial, or inherit. So, when adjusting the top and bottom values for a position: absolute element, it will use that parent element as its base, and the top left corner of that element will be top: 0 and left: 0, and bottom and right sides will be bottom: 0 and right: 0. The container that you want to define as its confines needs to be position: absolute, position: relative, position: sticky, or position: fixed. If you don't create this container, it will default to using body as its confines, meaning the positioning will be relative to the size of the body, and due to variant screen sizes, this is a nightmare, don't work with that. And this is if you're lucky, and there's not another element above it in nest order that has a different positioning, that does some unexpected wonkiness.

 

Letter-Spacing Banner
This is actually a bit tricky, because unless I give you the exact coding I used on mine, you'll have to play with some parts of the CSS until it looks and positions right, so don't be afraid to fiddle with it if it doesn't look quite right. Now, inside the header_box div, I have two other divs, these are classes header_box_inner, and header_box_title.

<div class="header_box">
    <div class="header_box_inner">
    </div>
    <div class="header_box_title">
    </div>
</div>

You can use whatever class names you want, of course.

 

The first element that shows by default is going to be _inner, so whatever you want to show first, that's what you'll type in the _inner div. Mine has a line-break in the middle (br), so it comes out to two lines, and the positioning and padding on it needs to be specific to get the alignment right. Yours may not use the same positioning or padding as mine. Again, you'll need to fiddle with it. Both _inner and _title are set to position: absolute; and top and left are at 0, by the way, just to make sure they overlap one another.

 

For _title, this is the second part that shows, and I have mine having of the board name in it, that comes together. Now, once we have our div contents in, we're going to work on the CSS, let's start with _inner.

_inner has text-alignment set to centre itself, it's also put on position: relative. I did padding-top until the text put itself where I wanted it. Normally, I'd advocate for using line-height for that, but because I have two lines in it, that won't work, so I used padding-top. Now we do the transition CSS:

transition: letter-spacing 1s ease-in-out,opacity 1s ease-in-out; -webkit-transition: letter-spacing 1s ease-in-out,opacity 1s ease-in-out; -moz-transition: letter-spacing 1s ease-in-out,opacity 1s ease-in-out; -o-transition: letter-spacing 1s ease-in-out,opacity 1s ease-in-out;

Transition CSS goes, in order: type of transition (you can do um, height, width, opacity, background, color, I will warn you, it does not work on display, so don't try that, save yourself the time; most likely, you can do what you want to do with an opacity transition, if you set it to position: absolute as well, it will stop taking up the space on the page and it works pretty much like a display transition, just, not), the amount of time the animation should take (can be in either ms or s, 500ms is about a half second, or 0.5s, easy way to go between milliseconds and seconds is, take the decimal back two places to get ms, 0.5 => 500, 0.3 => 300, 0.8 => 800), and then the kind of transition to use (ease, linear, ease-in, ease-out, or ease-in-out, we use ease-in-out here, this makes it a smoother transition both ways).

 

What's the difference in transition types?

 

Linear is the only one that does not use easing, formally called a timing function. Easing essentially slows part of the transition. Ease-in, for instance, starts the animation slowly, and finishes at full speed. Ease-out starts the animation at full speed, then finishes slowly. Ease-in-out starts slowly, is fastest at the middle of the animation, and then finishes slowly, too. Ease is basically ease-in-out, except it starts slightly quicker than it ends. So which one you actually want really depends on the specific animation effect you want. I'd definitely recommend playing with them a bit, to see which one you like best, but in general, for short animations like this one, you're not going to notice much of a difference.

 

Quick Thing: If you're only transitioning one CSS element, such as height, don't use "all," use "height." This prevents the transition animation from animating too much for what you want to do. As you can see with the CSS for the transitions above, you can define multiple transition types and speeds and timing functions for transitions by separating them by a comma; if you're transitioning only a few elements, for sure, use specific transition declarations, the first part is called the property, this defines the CSS property you want to transition, instead of falling into the rut of using "all." Why? If anything changes between one and the other, it will animate, when it's set to property "all." This can cause the CSS to be rendering too many animations for what you want to do, and can impact browser performance, and suck up more of your user-base's CPU than you want (yes, that is a thing, it does happen).

 

Next, we'll set up _title.

 

This one has the same transition coding, exact same, to make sure both transition when they should. We've also got text-align: center here, font styling, positioning, and this one is set to opacity: 0. We also, obviously, have letter-spacing. Mine is set to 38px, and I do remember fussing with it a bit when I first coded this about a year or so ago, in order to make it so that the letter-spacing would cause this div to take up the entire width of the header_box, before disappearing, and not spill over. It's up to you if you want it to take up the entire width (and it will also vary for yours how much spacing it can handle before it spills over and or disappears before the letters are done expanding apart), so you will have to futz with it a bit until it looks how you want.

 

Now we add the hover triggers:

.header_box:hover > .header_box_inner
.header_box:hover > .header_box_title

The > between :hover and the next class tells the hover transition to only work on the element within the header_box that is being hovered on, so think of it kind of like a selector, of a form, that tells the CSS which element of that class to alter. Hey, don't look at me like that, maybe some people don't know how hovers work. Anyway, now we add some more CSS, and repeat our transitions from the main classing up there. _inner's hover has letter-spacing 12px, and opacity 0. That's it. _title's has letter-spacing 0, and opacity 1.

 

So, we've gotten this far, and you're probably bouncing all excitedly; but there's a problem. _inner starts coming back in before _title is done easing out, and _title starts animating before _inner is out of the way. That's not terribly smooth, is it? We've forgotten a piece of CSS: transition-delay.

 

I have mine set to transition-delay: 1s. Why? Because these animations will take 1s to complete, I want to make sure the delay is long enough to let one animation finish before starting the next. Now we place this transition delay on _inner, and then on _title's hover. This causes the hover animation (what happens when you mouse over) to wait until _inner's transition is done before starting its own, and _inner's transition back into non-hover state to wait until _title's is done. This makes it much smoother an animation, things don't just randomly appear in a place that doesn't make sense for them to be yet.

 

Now, the specific letter-spacing settings will vary, most likely, depending on the final width of your text, and how far you want it to spread out before coming back together, but remember, _inner needs to start at 0 and then the hover CSS for it will have a higher number, whereas _title will start at the high number and transition to 0 in the hover CSS.

 

And there you go, now it mooviedoovies. That's it for this part!

 

Sci-Fi Corner Effect
In the gif above, you'll see these little purple corners that move back and forth in the box. These can be made to start in the absolute corners and move inward, or start inward a few pixels and move to the absolute corners, either way. The concept is the same, so I'm only going over the particulars of how to set this up once.

 

Now, before the header_box_inner div in the header_box, I added four more divs: header_box_topleft, header_box_bottomleft, header_box_topright, and header_box_bottomright.

<div class="header_box">
    <div class="header_box_topleft"></div>
    <div class="header_box_bottomleft"></div>
    <div class="header_box_topright"></div>
    <div class="header_box_bottomright"></div>
    <div class="header_box_inner">
    </div>
    <div class="header_box_title">
    </div>
</div>

The first thing we do to these is, we set their position to absolute. Then we make width and height both 10px. Now we do a border: solid. The border width is dependent on which box this is; for instance, _topleft is 1px 0 0 1px (top and left). _bottomleft is 0 0 1px 1px (bottom and left). When doing border width in a single, shorthand CSS line (border-width: numbers here), the directions go: top, right, bottom, left. Whatever the box is named is which sides you want the 1px border on. The colour attribution of header_box will colour these boxes' borders, so mine does not have border-color styling, you can add that if you want.

 

Now we add our transition lines. These will be using different properties based on which div they are, again. So, _topleft is using properties top and left, _bottomleft is using bottom and left, and so on. Whatever border width properties you defined in the CSS for the box, those two are the transition properties you'll be using. Set them up the same way as you did the transitions for _inner and _title above, it's a little more complicated, because we want different properties defined in each box depending on which it is, but only a little.

 

The majority of our CSS in this is in the standard classes, because we need to define the bordering and width and height and whatnot. For positioning, this also depends on which box it is. Ergo, we want _topleft to be left: 10px and top: 10px. _bottomright needs to be bottom: 10px and right: 10px... just like the CSS transitioning is set up for this. You can reverse this, so that these are all at 0, and then transition into 10px, if you want them to pull in, instead of push out, on hover.

 

Like we did above, we'll had the hover CSS codes:

.header_box:hover > .header_box_topleft
.header_box:hover > .header_box_bottomleft
.header_box:hover > .header_box_topright
.header_box:hover > .header_box_bottomright

In these, we set all the positioning on them to 0 (or 10px), and then copy over our transition CSS. Ta da! Mooviedoovie corner thingers!

 

Closing

Phew. Hopefully this made sense. Now, I will disclaimer here: you do not want to overuse these effects. When a CSS transition runs, the browser pulls more CPU to render the animation, so the more thingabobs moving around on your site, the more CPU your site is going to eat. On hover, it's not as bad, but the moving thingers can be really overwhelming and just look like you're trying way too hard, so, use them sparingly. The corner effect generally is less overwhelming than the letter-spacing one, so you could use it in more places before it's too much, but just remember: sometimes, less is more, and yes, it is possible to have too much of a good thing.

 

Hopefully this was interesting, if nothing else, and I hope I managed to give a decent introduction to CSS transitions and how to use them. Remember, you can CSS transition a lot of different CSS properties. One note, most likely, if you're futzing with height, you'll want to use min- or max-height, I cannot remember why, but the height transition animation does not render right, it may have been fixed by now. Display property also does not transition, so you'll need to use opacity transitions and switch between position: absolute and position: static or relative to achieve the proper effect.

 

Enjoy!


  • Like 1
  • Love 3

Related Guides

  • Arceus

    HTML/CSS Timeline

    By Arceus, in Coding,

    A full CSS and HTML vertical timeline? You bet! This uses pseudo-selectors to create a vertical bar with points along that bar with whatever text you need in it, creating a quite fancy historical timeline for your fantasy sites. With a few other embellishments, you can make it super neat.

    Other




User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

There are no reviews to display.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.