• 1
  • 2
Home > Tips

CSS3 Animation Examples - A Frequently-used CSS3 Animation Example

 

 

Below is one of the CSS3 animation examples we want to share with you. Please click the view the demo button to see what it looks like or click the Free download now button to download it directly.

This kind of CSS3 animation example is frequently used by many websites, it is metro style and weve added some CSS animation effect to it to make it more vivid.

Through the below passage, we will share the related HTML and CSS codes with you, and there are necessary explanations on the related HTML and CSS codes. If you are interested in how to create this kind of CSS3 animation examples, please go on reading this article.

                                                                   view the css3 checkbox examples        download the css3 checkbox examples



 HTML Codes of the CSS3 Animation Examples

This is a common list structure. Every content block contains a title such as SliceMaker Standard, a price tag such as $39.95 lifetime and a short description.


<div class='item clearfix'>
<ul class='item-list'>


<!-- BEGIN SliceMaker Standard -->

<li>
<div class='item-1'>
<h2><span>SliceMaker Standard</span></h2>
<h3>$ <span> 39</span>.95 <em>/</em> Lifetime</h3>
<p> The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.</p>
</div>
</li>
<!-- END SliceMaker Standard -->

 

<!-- BEGIN SliceMaker Platinum -->
<li>
<div class='item-2 active'>
<h2><span>SliceMaker Platinum</span></h2>
<h3>$ <span> 59</span>.95 <em>/</em> Lifetime</h3>
<p> The bestselling webpage making software, helps you create exceptional webpage/website without programming skills. 30 days freetrial without any functional limitation.</p>
</div>
</li>
<!-- END SliceMaker Platinum -->


<!-- BEGIN SliceMaker Deluxe -->
<li>
<div class='item-3'>
<h2><span>SliceMaker Deluxe</span></h2>
<h3>$ <span>69</span>.95 <em>/</em> Lifetime</h3>
<p>The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website. 30 days freetrial without any functional limitation.</p>
</div>
</li>
<!-- END SliceMaker Deluxe -->

 

</ul>
</div>


 

 CSS Codes of the CSS3 Animation Examples

Step 1: lets handle the layout style. We have used the float property to make the 3 content blocks in an ordered sequence.

body {
background-color: #dbdbdb;
}
.demo {
margin: 40px auto 0;
width: 960px;
}
.item-list li {
float: left;
width: 33%;
text-align: center;
overflow: hidden;
}
div[class^='item-'] {
margin-left: 10px;
background-color: #fff;
}

Step 2: lets beautify the internal elements within every content block.

.item-list h2 {
color: #fff;
font-size: 30px;
line-height: 60px;
background-color: #00aec7;
transition: all 200ms linear;
}
.item-list h3 {
font-size: 24px;
line-height: 100px;
}
.item-list h3 span {
font-size: 48px;
transition: all 300ms linear;
}
.item-list em {
color: #00aec7;
transition: all 200ms linear;
}
.item-list p {
color: #969696;
padding: 0 20px 40px;
transition: all 200ms linear;
}
.item-list div:hover h2 {
background-color: #006675;
transition: all 2s linear;
}

The most important part in step 2 is using the transition property (transition: all 200ms linear;) to make every elements have the transition animation effect. You may find that when the demo page is being loaded, there is an animation effect.

Step 3: This step is very important. When your mouse hovers over one of the content blocks, every element within the block such as title, price tag and the short description will have an animation effect. To realize this kind of animation effect, we need to use @keyframes.

/*Elements move from left side to right side*/
@keyframes moveF_Left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/*Elements move from right side to left side*/

@keyframes moveF_Right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
/*Elements move from top side to bottom side*/
@keyframes moveF_Bottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}

Step 4: through step 3, we have already created the animation effect. However, we need to use :hover to trigger the animation effect.

.item-list div:hover h2 span {
display: inline-block;
animation: moveF_Left 500ms ease;
}
.item-list div:hover h3 {
animation: moveF_Right 500ms ease;
}
.item-list div:hover h3 span {
font-size: 60px;
}
.item-list div:hover p {
animation: moveF_Bottom 500ms ease;
color: #00aec7;
}
.item-list div:hover p em {
color: #969696;
}


OK, through the above 4 steps, we have already created the completed CSS codes for the CSS3 animation examples. Below is the completed CSS codes for the CSS3 animation examples, please view them.

body {
background-color: #dbdbdb;
}
.demo {
margin: 40px auto 0;
width: 960px;
}
.item-list li {
float: left;
width: 33%;
text-align: center;
overflow: hidden;
}
div[class^='item-'] {
margin-left: 10px;
background-color: #fff;
}
.item-list h2 {
color: #fff;
font-size: 30px;
line-height: 60px;
background-color: #00aec7;
transition: all 200ms linear;
}
.item-list h3 {
font-size: 24px;
line-height: 100px;
}
.item-list h3 span {
font-size: 48px;
transition: all 300ms linear;
}
.item-list em {
color: #00aec7;
transition: all 200ms linear;
}
.item-list p {
color: #969696;
padding: 0 20px 40px;
transition: all 200ms linear;
}
.item-list div:hover h2 {
background-color: #006675;
transition: all 2s linear;
}
.item-list div:hover h2 span {
display: inline-block;
animation: moveF_Left 500ms ease;
}
.item-list div:hover h3 {
animation: moveF_Right 500ms ease;
}
.item-list div:hover h3 span {
font-size: 60px;
}
.item-list div:hover p {
animation: moveF_Bottom 500ms ease;
color: #00aec7;
}
.item-list div:hover p em {
color: #969696;
}
/*Elements move from left side to right side*/
@keyframes moveF_Left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/*Elements move from right side to left side*/
@keyframes moveF_Right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
/*Elements move from top side to bottom side*/
@keyframes moveF_Bottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}

                                               view the css3 checkbox examples        download the css3 checkbox examples



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0