-
-
Save tutweb/823bda32cf5dbe3ad854 to your computer and use it in GitHub Desktop.
Source Code Animasi Mengetik Dengan Menggunakan CSS3 | Demo untuk menunjang artikel di tutorial-webdesign.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Animasi Mengetik Teks | Tutorial-webdesign.com</title> | |
<meta name="description" content="Tutorial Membuat Animasi Mengetik Dengan Menggunakan CSS3"/> | |
<meta name="keywords" content="mengetik, typing, typewritter, css, css3, web design, web animation, css animation"/> | |
<style> | |
.container{ | |
width: 800px; | |
margin: 30px auto; | |
padding: 20px 30px; | |
background: #eee; | |
border: 1px solid #ddd; | |
} | |
.wadah-mengetik | |
{ | |
font-size: 22px; | |
width: 740px; | |
white-space:nowrap; | |
overflow:hidden; | |
-webkit-animation: ketik 5s steps(50, end); | |
animation: ketik 5s steps(50, end); | |
} | |
@keyframes ketik{ | |
from { width: 0; } | |
} | |
@-webkit-keyframes ketik{ | |
from { width: 0; } | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<h2>Animasi Mengetik Teks Dengan CSS</h2> | |
<p><a href="http://www.tutorial-webdesign.com/membuat-animasi-mengetik-teks-dengan-css">Back to Tutorial »</a></p> | |
<p class="wadah-mengetik">Welcome to Tutorial Web Design Indonesia | <a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></p> | |
</div> | |
<div class="container"> | |
<p>Animasi mengetik teks biasanya dibuat dengan bantuan Jquery, namun pada artikel kali ini kita akan mencoba membuatnya hanya dengan <a title="CSS" href="http://www.tutorial-webdesign.com/tag/css/">CSS</a>.</p> | |
<p>Animasi ini tentunya bisa digunakan jika ingin membuat semacam presentasi di website, atau untuk sekedar mempercantik halaman website....</p> | |
<p>Baca tutorial selengkapnya <a href="http://www.tutorial-webdesign.com/membuat-animasi-mengetik-teks-dengan-css">disini</a></p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment