BACK
BACK
BACK
Loading...

Blog / HowTos /  How to Create Different CSS Transition Effect

January 30, 2016 - Cathy

How to Create Different CSS Transition Effect

CSS Transition Effect Creation Basics

CSS3 enables you to add transitions to different CSS properties on any HTML element. You can add different types of animation to your web pages using CSS transition effects. Transitions allow a single CSS property or all properties on an element to be changed. In order to create a CSS transition effect, two things must be specified:

  1. The CSS property you want to add an effect to
  2. The duration of the effect ( If duration isn’t specified, there will be no effect since the default value is 0)
fullimage1

The example here shows a 100px * 100px red <div> element. The <div> element has specified a transition effect for the width property, with duration of 3 seconds:

div {
width: 100px;
height: 100px;
background: red;
‐webkit‐transition: width 3s; /* Safari */
transition: width 3s;
}

The CSS hover transition effect will start when the specified CSS property (width) changes value. Now specify a new value for the width property when a user mouses over the <div> element:

div:hover {
width: 300px;
}

css transition effect

When the cursor mouses out of the element, it will gradually change back to its original style. The basics of creating a CSS transition effect are fairly simple as can be seen in the previous example. There are five CSS3 transition properties:

  1. Transition-delay: Specifies a delay (in seconds) for the transition effect
  2. Transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete
  3. Transition-property: Specifies the name of the CSS property the transition effect is for
  4. Transition-timing-function: Specifies the speed curve of the transition effect
  5. Transition: A shorthand property for setting the four transition properties into a single property

With these five properties you can control the CSS property changes you want in an effect to suit your needs. The following are some examples of how to create a few different CSS hover transition effects:

  •  Zoom in:
.container:hover .image {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.container {
overflow:hidden;
width:200px;
height:150px;
}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
  • Zoom out:
.container:hover .image {
-webkit-transform:scale(1);
transform:scale(1);
}
.container {
overflow:hidden;
width:200px;
height:150px;
}
.image {
-webkit-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
  • Glowing text:
.text:hover {
text-shadow: 0px 0 15px #fff;
}
.text {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
  • Image with text overlay – fade effect:
    • CSS:
.container {
position:relative;
}
.textbox:hover {
opacity:1;
}
.text {
padding-top: 50px;
}
.textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
    • HTML:
<div class="container">
<imgsrc="" alt="">
<div class="textbox">
<p class="text">TEXT</p>
</div>
</div>

There are probably thousands of different transitions that are available for free as well as plenty more for sale. Some people just like making their own because they enjoy it. Using a CSS transition effect instead of JavaScript will shorten page loading time. You can include more CSS transitions without affecting your site adversely should you choose to. CSS transitions are useful in a number of ways including:

  • Website navigation
  • Highlight important links and information
  • Shorter page loading time
  • Increased user engagement

Take advantage of the benefits that a CSS transition effect can offer your site and take a look at what is out there. You may be surprised at how much you can do with transition and hover effects CSS.

If you experiencing any issue with your CSS transition effect display, ask us a question!

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5