Hai, jumpa lagi dengan saya 🙂 , pada tutorial sebelumnya saya sudah bagikan tutorial tentang cara membuat timeline, nah, kali ini saya akan bagikan tutorial lagi mengenai Cara Membuat Animasi Timeline Dengan CSS3, berikut langkah-langkah nya.
Langsung saja, kalian buat struktur HTML seperti berikut.
<div id="conteneur">
<h2>Animasi Time line Dengan CSS3</h2>
<div id="bouton">
<span class="text_hover">Hover me</span>
<div class="frise_barre">
<div class="point2 point_general"></div>
<div class="ligne2 ligne_general"></div>
<div class="date2 date_general">2016 - Pages you view in
</div>
<div class="point4 point_general"></div>
<div class="ligne4 ligne_general"></div>
<div class="date4 date_general">2016 - Pages you view in
</div>
<div class="point1 point_general"></div>
<div class="ligne1 ligne_general"></div>
<div class="date1 date_general">2016 - Pages you view in
</div>
<div class="point3 point_general"></div>
<div class="ligne3 ligne_general"></div>
<div class="date3 date_general">2006 - Adprehendit initium aut se.</div>
<div class="point5 point_general"></div>
<div class="ligne5 ligne_general"></div>
<div class="date5 date_general">2016 - Pages you view in
</div>
</div>
</div>
</div>
Setelah itu, kita buat animasi nya dengan kode CSS3 berikut ini.
body {
background:#34495e;
}
h2 {
color:#e67e22;
font-family: 'Roboto Condensed', sans-serif;
font-weight:400;
text-align:center;
font-size:30px;
margin:50px 0;
}
#conteneur {
width:1000px;
position:relative;
margin:auto;
display:block;
padding:20px 0 0 0;
}
#bouton {
background:#e67e22;
width:200px;
height:128px;
position:relative;
border-radius:50%;
text-align:center;
padding:72px 0 0 0;
display:block;
margin:auto
}
.text_hover {
font-family: 'Roboto Condensed', sans-serif;
text-transform:uppercase;
color:#34495e;
font-size:30px;
font-weight:700;
}
.frise_barre {
width:6px;
height:0px;
position:absolute;
top:200px;
left:97px;
background:#e67e22;
transition: all 0.6s 0.5s;
-webkit-transition: all 0.6s 0.5s;
}
#bouton:hover .frise_barre {
height:400px;
transition: all 0.6s 0.4s;
-webkit-transition: all 0.6s 0.4s;
}
.point_general {
width:0px;
height:0px;
border-radius:50%;
background:#e67e22;
position:absolute;
transition: all 0.4s 0.3s;
-webkit-transition: all 0.4s 0.3s;
}
.ligne_general {
width:0px;
height:0px;
background:#e67e22;
position:absolute;
transition: all 0.4s 0s;
-webkit-transition: all 0.4s 0s;
}
.date_general {
color:#e67e22;
position:absolute;
transition: all 0.4s 0s;
-webkit-transition: all 0.4s 0s;
opacity:0;
width:220px;
font-family: 'Roboto Condensed', sans-serif;
font-size:16px;
}
#bouton:hover .point1 {
height:20px;
width:20px;
left:-7px;
top:150px;
transition: all 0.2s 1s;
-webkit-transition: all 0.2s 1s;
}
#bouton:hover .ligne1 {
width:40px;
height:2px;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
#bouton:hover .date1 {
opacity:1;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
.point1 {
left:3px;
top:160px;
}
ligne1 {
left:3px;
top:160px;
}
.date1 {
left:50px;
top:150px;
}
#bouton:hover .point2 {
height:20px;
width:20px;
left:-7px;
top:60px;
transition: all 0.2s 1s;
-webkit-transition: all 0.2s 1s;
}
#bouton:hover .ligne2 {
width:40px;
height:2px;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
#bouton:hover .date2 {
opacity:1;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
.point2 {
left:3px;
top:70px;
}
.ligne2 {
left:3px;
top:70px;
}
.date2 {
left:50px;
top:62px;
}
#bouton:hover .point3 {
height:20px;
width:20px;
left:-7px;
top:190px;
transition: all 0.2s 1s;
-webkit-transition: all 0.2s 1s;
}
#bouton:hover .ligne3 {
width:40px;
height:2px;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
#bouton:hover .date3 {
opacity:1;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
.point3 {
left:3px;
top:200px;
}
.ligne3 {
right:3px;
top:200px;
}
.date3 {
right:60px;
top:192px;
text-align:right;
}
#bouton:hover .point4 {
height:20px;
width:20px;
left:-7px;
top:100px;
transition: all 0.2s 1s;
-webkit-transition: all 0.2s 1s;
}
#bouton:hover .ligne4 {
width:40px;
height:2px;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
#bouton:hover .date4 {
opacity:1;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
.point4 {
left:3px;
top:110px;
}
.ligne4 {
right:3px;
top:110px;
}
.date4 {
right:60px;
top:102px;
text-align:right;
}
#bouton:hover .point5 {
height:20px;
width:20px;
left:-7px;
top:280px;
transition: all 0.2s 1s;
-webkit-transition: all 0.2s 1s;
}
#bouton:hover .ligne5 {
width:40px;
height:2px;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
#bouton:hover .date5 {
opacity:1;
transition: all 0.4s 1.3s;
-webkit-transition: all 0.4s 1.3s;
}
.point5 {
left:3px;
top:290px;
}
.ligne5 {
right:3px;
top:290px;
}
.date5 {
right:60px;
top:282px;
text-align:right;
}
Kalo sudah semua kode diatas, simpan terlebih dahulu, kemudian coba kalian buka pada browser masing-masing, kemudian arahkan kursor pada bagian hover, kalo muncul animasi, berarti kode diatas sudah benar, baik sampai disini tutorial mengenai Cara Membuat Animasi Timeline Dengan CSS3, semoga bermanfaat.
Selamat mencoba 🙂