Salah satu yang dapat dilakukan CSS adalah membuat tampilan lebih menarik, tapi ada juga yang memanfaatkannya untuk membuat animasi. Animasi yang dibuat sangatlah banyak, bisa kalian cek di codepen.io atau kalian bisa temukan ditempat lainnya.
Saya sempat belajar animasi tentang tulisan bergerak dan menurut saya menarik sekali. Hingga akhirnya saya memutuskan untuk menulis tutorialnya untuk dicoba oleh kalian. Sangat simpel dan menarik menurut saya. Hasilnya anda bisa lihat disini
Karena web ini bertujuan untuk memberikan tutorial dan belum terlalu canggih hingga bisa run and try seperti w3schools. Jadi mohon maaf cuma bisa berikan contoh hasilnya saja di tab baru.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar CSS Animasi</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display-swap">
<link rel="stylesheet" href="animasi.css">
</head>
<body>
<div class="wrapper">
<p>Pemograman itu</p>
<div class="words">
<span>mudah</span>
<span>sulit</span>
<span>keras</span>
<span>candu</span>
<span>indah</span>
</div>
</div>
</body>
</html>Ini adalah kerangkanya berupa HTML dan kita akan tambahkan sedikit animasi yang disimpan di file animasi.css.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
font-size: 45px;
font-weight: 500;
}
body{
background-color: #0efcd8;
height: 100vh;
display: grid;
place-items: center;
}
.wrapper{
box-sizing: content-box;
background-color: #ffffff;
height: 70px;
padding: 50px 30px;
display: flex;
border-radius: 8px;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
}
.words{
overflow: hidden;
}
span{
display: block;
height: 100%;
color: #0efcd8;
padding-left: 10px;
animation: spin_words 6s infinite;
}
@keyframes spin_words{
10%{
transform: translateY(-112%);
}
25%{
transform: translateY(-100%);
}
35%{
transform: translateY(-212%);
}
50%{
transform: translateY(-200%);
}
60%{
transform: translateY(-312%);
}
75%{
transform: translateY(-300%);
}
85%{
transform: translateY(-412%);
}
100%{
transform: translateY(-400%);
}
}File animasi.css harus disimpan satu folder dan sejajar dengan file htmlnya. Karena kita memanggilnya secara sejajar.
Anda dapat mempelajari berbagai hal pada website ini. Jika anda ingin mempelajari hal lain diluar teknologi, kalian bisa melihat kategori belajar apa aja. Terima kasih!
