CSS3 Transitions – 5 ready to use examples

What are CSS transitions?

Introduced a few years ago with the CSS3 specification, the transition property allows front-end developers to smoothly change property values over a given time.

If you need a website designed with the latest technologies, including CSS3 transitions, feel free to visit 7ninjas.

As of 2019, transitions are well supported by modern browsers. Older browsers might still support this functionality, if you use vendor prefixes like -webkit-, -moz-, or -o-. Please refer to Can I use for more info on browser compatibility.

If you need more information on CSS transitions, W3 Schools have a concise article that will teach you what you need to know in order to get started.

Smooth background color change

A simple, but common effect in many modern websites, is to have a smooth background color change on hover. Let’s start with this dead simple piece of HTML:

<div class="color">Change Color</div>

And now time for the CSS magic. Notice the transition property on line 12, which animate our <div> on hover.

div.color {
    margin: 121px 149px;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
}

div.color:hover {
    background: #53a7ea;
}

Source: Web Designer Depot

Sophisticated background transition

A more sophisticated example, demonstrating how easy it is to animate a background with CSS3. Here is the HTML:

<div class="container">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
</div>

And the corresponding CSS code, where you can spot the use of transition as well as transform, for more sophisticated animations.

.circle {
	border-radius: 50%;
	left: calc(50% - 6.25em);
	top: calc(50% - 12.5em);
	transform-origin: 50% 12.5em;
	width: 12.5em;
	height: 12.5em;
	position: absolute;
	box-shadow: 0 1em 2em rgba(0, 0, 0, .5);
}

.one,
.three {
	background: rgba(142, 92, 205, .75);
	transition: background 1s ease-in;
}

.two,
.four {
	background: rgba(236, 252, 100, .75);
}


.one {
	transform: rotateZ(0);
}

.two {
	transform: rotateZ(90deg);
}

.three {
	transform: rotateZ(180deg);
}

.four {
	transform: rotateZ(-90deg);
}

.circle:hover {
  background: rgba(142, 92, 205, .25);
}

Source: Flavio Copes

CSS gradient border & rounded corner buttons

Here is an advanced, super good looking button, made entirely of CSS3. The HTML is very simple:

<a class="btn" href="#">
  <span>A button!</span>
</a>

The CSS code is a bit more complex, and demonstrate the full power of CSS3:

body {
  background: #e7e8e9;
  padding: 40px;
}

.btn {
	background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
	border-radius: 40px;
  box-sizing: border-box;
	color: #00a84f;
	display: block;
	font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/
	height: 80px;
	letter-spacing: 1px;
	margin: 0 auto;
	padding: 4px;
	position: relative;
  text-decoration: none;
	text-transform: uppercase;
	width: 264px;
	z-index: 2;
}

.btn:hover {
	color: #fff;
}

.btn span {
	align-items: center;
	background: #e7e8e9;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
}

.btn:hover span {
	background: transparent;
}

Source: Amber Weinberg

Different transitions for hover on / hover off

Transitions can be different for both hover on and hover off states, as demonstrated with the following HTML…

<a id="button" href="#">Buy Now!</a>

…And CSS:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Source: Chris Coyier

Hover over one element to affect another

Let’s finish this round-up with an interesting example on how we can hover one element to affect another one. Let’s start by creating two HTML containers:

<div id="box1">#box1</div>
<div id="box2">#box2</div>

Now let’s have a look at the CSS:

#box2 {
    position: absolute;
    left: 120px;
    background: blue;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
  #box1:hover + #box2 {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    left: calc(100% - 102px);
    background: yellow;
}

Source: The Art of Web