Sweep to the right transition

The examples on this page will work now in Firefox, Safari, Chrome, Opera and Internet Explorer 10. In older browsers you will see either no effects, or the transforms taking place without any animation.

Bạn đang xem: Sweep to the right transition

The animations presented below involve setting up a transformation to take place in response to a mouseover or other sự kiện. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation lớn take place incrementally over a set time period.

There are also other kinds of animation available, including
keyframes for perpetual motion, & requestAnimationFrame which gives complete control over the timing và path. These are covered in separate articles.

Firefox & Opera now tư vấn these transforms with an almost identical syntax - just replace -webkit- with -moz- or -o- in the examples below.

Internet Explorer 10 supports transitions with no prefix. In IE10 PReview the -ms- prefix was required for transitions. Transforms in all versions of IE10 still require the prefix.

To support all modern browsers, the following styles should be used for transitions:

-webkit-transition -moz-transition transition

and for transforms:

-webkit-transform -moz-transform -ms-transform transform

We"ve omitted the -o- prefix because Opera now recognises the WebKit styles.

Introducing CSS Transformations

The effect of a CSS Transsize is khổng lồ modify the appearance of an element in the browser by translation, rotation or other means. When defined in a style sheet, transformations are applied as the page is rendered, so you don"t actually see any animations taking place.Transforms can also be applied as a mouseover or similar effect which you can see in the next section.

Apple"s proposal for CSS Transformations calls for the ability to change the perspective sầu and work in three dimensions, but that"s some way away yet. Even the features demonstrated here won"t appear in other browsers until they"re approved by the standards body toàn thân who are still quibbling over CSS3 modules.

Below we"ve sầu placed four identical DIV"s styled as a 100 x 60 px box with a 2 pixel border. Subsequently, each element has been transformed in some way using the transkhung property:

box1Translated to lớn the right: transform: translate(3em,0);
box 2Rotated 30 degrees with the clock: transform: rotate(30deg);
box 3Translated lớn the left và down: transform: translate(-3em,1em);
box 4Scaled to twice its original size: transform: scale(2);

box 1
box 2
box 3

Without the translations, and the red border on the second box, you would see just four identical boxes labelled one through four. What you see in supported browsers (Safari, Chrome, Firefox, Opera), however, will be more lượt thích this:


Of note is the fact that the text is still selectable in transformed elements, even when rotated, and that scaling an element affects properties including border widths và phông sizes & not just the box dimensions.

Animating your Transforms

While CSS Transformation in itself is a powerful tool for developers (though I shudder khổng lồ think what will happen as it becomes more widely used), the ability to animate the same effects using -webkit-transition is far more exciting. Move sầu your mouse over the following four boxes for a demonstration:

box 1
box 2

Again, we"re still only using HTML & CSS to lớn make this happen. Without CSS Transforms the two boxes will still change their border-color, và possibly also the border-radius, but it happens immediately rather than as a one second animation.

For more advanced examples you can read our new article on using JavaScript to lớn trigger the animation. And for an alternative to CSS transitions, và finer control over the animation paths & timing, you can use Window.requestAnimationFrame.

Multiple Transforms on one element

To apply more than one transformation to lớn a single element simply danh sách them one after another separated by spaces. The subthực đơn for example at the top right of this page has the following styles:

lưu ý that IE10 now uses no prefix for transitions, but -ms- is still required for transforms.

This means that when you hover over the subthực đơn, it will change colour, rotate & double in form size over a period of one second as shown here:


These effects are now available in the lakiểm tra public release of Safari, so in principle all OSX users will be able to lớn see these effects. Whether it"s a good idea khổng lồ add them lớn your trang web I"ll leave up to lớn you.

Thanks to lớn misterbisson those without WebKit can now see a screencast of the menu animation:

Animations in action

Now here"s another example of the kind of fun we can have in combining different effects inlớn single animation. Perhaps you can already work out what"s going khổng lồ happen based on the CSS?

và the HTML:

If you"re using Safari 3 you may notice some problems with the animation, particularly when it reverses after you move the mouse away, but in the lakiểm tra version of WebKit it"s already much smoother. Also the animation in Opera is a bit erratic, with not all the elements being animated.

The dotted outline that appears during the animation shows the placement of the DIV containing the rocket image. This DIV translates across the screen while the image inside is rotated. Simple!

For the browser-impaired what"s happening is that when you move the mouse over the space background, the rocket translates from the bottom left to lớn the top right over a period of 3 seconds (translate()) and also rotates 70 degrees in a clockwise direction over the first 2 seconds (rotate()). The effect is rudimentary, but shows the potentional.

To have sầu more control over the animation paths & timing, you can set up WebKit Keyframes. They also allow the animations to run automatically, & continuously, rather than just in response khổng lồ mouse events.

Multiple timing functions


In this example we are applying four different transitions using four different timing functions.

When you :hover over the area lớn the right the xanh box will spin, change color from red to xanh và move sầu from the top left of the containing box to lớn the bottom right over two seconds.

Xem thêm: tải phần mềm nss

The first thing you will notice is that that the movement of the box appears lớn be curved rather than straight. That"s because we"ve used the ease-out timing function for the horizontal translation và ease-in for the vertical.

To animate over an actual curved path, or even an arbitrary path, you will need lớn use JavaScript to lớn control the animation.

During the animation, the colour change from blue lớn red takes place over the first second of the two second transition, followed by the rotation which takes place over the second second.


The trick to this is that instead of defining the -webkit-transition as a single property, you can break it up into component parts. We"ve sầu also made use of -webkit-transition-delay which allows you lớn mix the starting point of different effects.

Here are the relevant CSS statements:

The rules affecting the background colour transition have been highlighted. They take place over the first second (0s delay, 1s duration). The rotation transsize takes place in the next second (1s delay, 1s duration).

For other browsers the -webkit- prefixed styles need to lớn be repeated & the prefix replaced with -moz-, -o- và -ms-. With the exception that *transition* requires no prefix for Internet Explorer 10 and higher.

Firefox requires units to be specified even for zero values in -moz-transition-delay, so 0s, 0s, 0s, 1s will work for the example above sầu.

Hover over one element khổng lồ affect another

A couple of people have sầu asked about triggering animations in relation khổng lồ a cliông chồng or hover event elsewhere on the page. With JavaScript this can be done by using an sự kiện handler to lớn set or change the className of the element khổng lồ be animated, & to lớn have sầu a transformation or keyframes associated with the new class.

Using CSS there are some options for targeting related elements. These involve selectors such as the > (child), + (adjacent sibling) and ~ (general sibling) combinators.

The preceding examples all required a direct hover sự kiện either on the element itself or on its container, wheras in this example the xanh box is animated only when you hover over its sibing, the red box:


The relevant CSS code is as follows. lưu ý that we are using the + adjacent sibling combinator to target #box2 when #box1 experiences a hover sự kiện. The ~ combinator may be more flexible in letting you target elements that are further away from the triggering element (some examples).

Internet Explorer 11 fails trying to lớn animate when the values have sầu been assigned using calc(). You will need to lớn use a fixed value instead.

Of course we can still animate the first box at the same time as targeting it"s sibling or siblings:


Just be sure not khổng lồ move sầu the hovered element out from under the pointer or the animation will stop/reverse.

These examples work more or less as intended in WebKit (Safari, Chrome), Firefox và Opera browsers. They also work in Internet Explorer 10.

Controlling the reverse animation

In all the examples above you may have noticed some strange effects when the animation is reversed - particularly when the mouse moves away from the trigger area before the animation has completed.

The box in the animation below will rise up slowly và then shoot off khổng lồ the right useing an extreme cubic-bezier timing function, making it start off quickly & then slow down at the end.

When you move sầu your mouse away it will not track baông chồng over the same path, as the vertical animation will come first, and the box will move sầu quickly from right khổng lồ left before slowing down.


The trick is to lớn move sầu to original transition settings to the :hover statement & for the "non-hover" lớn use a transition that reverses them:

This can be useful for button & menu effects khổng lồ make an element on the page appear quickly and then fade out slowly, or vice versa.

Remember that the transitions mix in the :hover statement are the ones that will be used as the hover state is applied. The "default" transition settings will be used when returning to lớn the mặc định state.



Related Articles - Transforms and Transitions

Animation Using CSS Transforms