CSS transition and animate or transform with multiple properties

Transition:

The transition attribute can be used to create simple animations on a web page, you can use it to make the browser fade between two states and more. You have to specify the properties you'd lie to animate or you can specify 'all' which will tell it to just animate every property change. An example usage can be seen below, note that you need to place a comma between the properties that you want to transition/animate and also the need to specify a time for the transition, this can be integer or decimal:

-moz-transition: transform 1s, opacity 1s;
-o-transition: transform 1s, opacity 1s;
-webkit-transition: transform 1s, opacity 1s;
transition: transform 1s, opacity 1s;

You don't have to specify the -o-, -webkit- and -moz- properties but it does provide limited backward support for older browsers.

See w3schools for more on transitions.

Transform:

Transform works just like the transition attribute, the example seen below moves the element down 6px and rotates the element to a 45 degree angle, note that unlike the transition property, you do not need to place a comma between different transforms.

-moz-transform: translate(0, 6px) rotate(45deg);
-ms-transform: translate(0, 6px) rotate(45deg);
-o-transform: translate(0, 6px) rotate(45deg);
-webkit-transform: translate(0, 6px) rotate(45deg);
transform: translate(0, 6px) rotate(45deg);

Again, you don't have to specify the -o-, -webkit- and -moz- properties but it does provide limited backward support for older browsers.

See w3schools for more on transforms.


Published at

Tags: CSS3

Luke Alderton

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By DavidassuG on MVC forms in Umbraco
12 Jul 2018, 10:54 AM
By Luke on Setting up tables in SQLite with a primary key on a Xamarin Forms app
11 Jul 2018, 09:18 AM
By Travis on Setting up tables in SQLite with a primary key on a Xamarin Forms app
7 Jul 2018, 15:44 PM
By Luke on Auto/Custom height on Xamarin Forms WebView for Android and iOS
15 Jun 2018, 09:43 AM
By vikki on Auto/Custom height on Xamarin Forms WebView for Android and iOS
14 Jun 2018, 13:35 PM
By jimbo on JQuery Unobtrusive Validation for dynamically created elements
13 Jun 2018, 17:13 PM
By ScottKem on MVC forms in Umbraco
8 Jun 2018, 10:29 AM
By Alaa on java.lang.UnsatisfiedLinkError: no rxtxSerial in java.library.path
3 Jun 2018, 20:16 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development