Definisi dan Penggunaan
Beberapa properti CSS dapat dianimasikan, artinya dapat digunakan dalam animasi dan transisi.
Properti beranimasi dapat berubah secara bertahap dari satu nilai ke nilai lainnya, seperti ukuran, angka, persentase, dan warna.
Browser Pendukung
Angka-angka dalam tabel merupakan versi browser yang mendukung penuh animasi CSS.
Angka yang diikuti dengan -webkit-, -moz-, atau -o- menentukan versi yang bekerja dengan prefiks.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
Contoh
Menganimasikan warna latar belakang dari merah menjadi biru:
<!DOCTYPE html> <html> <head> <style> #myDIV { width: 300px; height: 200px; background: red; animation: mymove 5s infinite; } @keyframes mymove { from {background-color: red;} to {background-color: blue;} } </style> </head> <body> <h1> Animasi warna Background </h1> <p> Ubah warna latar belakang secara bertahap dari merah menjadi biru: <p> <div id = "myDIV"> </div> <p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p> </body> </html>
Properti Beranimasi
Properti ini dapat dianimasikan dalam CSS:
- Background
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red url('https://dosenit.com/wp-content/uploads/2020/10/0dcd6f4e410a34465a2d611913199e50.gif') no-repeat top left/5px 5px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background: blue bottom right/50px 50px;}
}
</style>
</head>
<body>
<h1>Animation of background</h1>
<p>Ubah properti background secara bertahap:<p>
<div id="myDIV"></div>
<p> Properti background adalah properti singkatan untuk semua properti background. </p>
<p> Properti background-color, background-position, dan background-size <em> dapat dianimasikan </em> di CSS. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Background-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background-color: blue;}
}
</style>
</head>
<body>
<h1>Animation of background-color</h1>
<p> Ubah warna latar belakang secara bertahap dari merah menjadi biru, dan kembali ke merah: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Background-position
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
background-image: url('https://dosenit.com/wp-content/uploads/2020/10/0dcd6f4e410a34465a2d611913199e50.gif');
background-position: top left;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background-position: center;}
}
</style>
</head>
<body>
<h1>Animation of background-position</h1>
<p> Secara bertahap ubah posisi latar belakang dari "kiri atas" ke "tengah", dan kembali ke "kiri atas": <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Background-size
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
background-image: url('https://dosenit.com/wp-content/uploads/2020/10/0dcd6f4e410a34465a2d611913199e50.gif');
background-size: 20px 20px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {background-size: 125px 125px;}
}
</style>
</head>
<body>
<h1>Animation of background-size</h1>
<p> Ubah ukuran latar belakang secara bertahap dari "10px 10px" menjadi "125px 125px", dan kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border</h1>
<p> Ubah properti border secara bertahap: <p>
<div id = "myDIV"> </div>
<p> Properti border adalah properti singkatan untuk semua properti border. </p>
<p> Lihat properti perbatasan individu untuk melihat mana yang <em> bisa dianimasikan </em>. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-bottom
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-bottom</h1>
<p> Ubah properti border-bottom secara bertahap: <p>
<div id = "myDIV"> </div>
<p> Border-bottom adalah properti singkatan untuk semua properti border-bottom. </p>
<p> Lihat masing-masing properti tepi bawah untuk melihat mana yang <em> dapat dianimasikan </em>. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-bottom-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-color: lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-bottom-color</h1>
<p> Ubah secara bertahap properti border-bottom-color dari hitam menjadi biru: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-bottom-left-radius
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-left-radius: 150px;}
}
</style>
</head>
<body>
<h1>Animation of border-bottom-left-radius</h1>
<p> Ubah secara bertahap properti border-bottom-left-radius dari 0 menjadi 150px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-bottom-right-radius
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-right-radius: 150px;}
}
</style>
</head>
<body>
<h1>Animation of border-bottom-right-radius</h1>
<p> Ubah secara bertahap properti border-bottom-right-radius dari 0 menjadi 150px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-bottom-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-bottom-width: 50px;}
}
</style>
</head>
<body>
<h1>Animation of border-bottom-width</h1>
<p> Secara bertahap ubah properti border-bottom-width dari 0 menjadi 50px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-color: lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-color</h1>
<p> Ubah secara bertahap properti border-color dari coral ke lightblue, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-left
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-left: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-left</h1>
<p> Ubah properti border-left secara bertahap: <p>
<div id = "myDIV"> </div>
<p> Border-left adalah properti singkatan untuk semua properti border-left. </p>
<p> Lihat properti tepi kiri individu untuk melihat mana yang <em> bisa dianimasikan </em>. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-left-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-left-color: lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-left-color</h1>
<p> Secara bertahap ubah properti border-left-color dari coral ke lightblue, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-left-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-left-width: 15px;}
}
</style>
</head>
<body>
<h1>Animation of border-left-width</h1>
<p> Secara bertahap ubah properti border-left-width dari 1px menjadi 15px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-right
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-right: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-right</h1>
<p> Ubah properti border-right secara bertahap: <p>
<div id = "myDIV"> </div>
<p> Border-right adalah properti singkatan untuk semua properti border-right. </p>
<p> Lihat properti hak batas individu untuk melihat mana yang <em> dapat dianimasikan </em>. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-right-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid coral;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-right-color: lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-right-color</h1>
<p> Secara bertahap ubah properti border-right-color dari coral ke lightblue, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-right-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-right-width: 15px;}
}
</style>
</head>
<body>
<h1> Animasi lebar batas kanan </h1>
<p> Secara bertahap ubah properti border-right-width dari 1px menjadi 15px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-spacing
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
#myTABLE {
border-spacing: 2px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-spacing: 20px;}
}
</style>
</head>
<body>
<h1>Animation of border-spacing</h1>
<p> Ubah secara bertahap properti penspasian batas dari 2px menjadi 20px lalu kembali: <p>
<table id = "myTABLE">
<tr>
<th> Nama </th>
<th> Usia </th>
</tr>
<tr>
<td> Yuri </td>
<td> 9 </td>
</tr>
<tr>
<td> Fabian </td>
<td> 7 </td>
</tr>
<tr>
<td> Iyus </td>
<td> 2 </td>
</tr>
</table>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-top
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-top</h1>
<p> Ubah properti border-top secara bertahap: <p>
<div id = "myDIV"> </div>
<p> Border-top adalah properti singkatan untuk semua properti border-top. </p>
<p> Lihat masing-masing properti border-top untuk melihat mana yang <em> bisa dianimasikan </em>. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-top-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 15px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-color: lightblue;}
}
</style>
</head>
<body>
<h1>Animation of border-top-color</h1>
<p> Ubah secara bertahap properti border-top-color dari hitam menjadi biru, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-top-left-radius
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-left-radius: 150px;}
}
</style>
</head>
<body>
<h1>Animation of border-top-left-radius</h1>
<p> Ubah secara bertahap properti border-top-left-radius dari 0 menjadi 150px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p><p> Ubah secara bertahap properti border-top-left-radius dari 0 menjadi 150px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-top-right-radius
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-right-radius: 150px;}
}
</style>
</head>
<body>
<h1>Animation of border-top-right-radius</h1>
<p> Ubah secara bertahap properti border-top-right-radius dari 0 menjadi 150px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Border-top-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {border-top-width: 15px;}
}
</style>
</head>
<body>
<h1>Animation of border-top-width</h1>
<p> Ubah secara bertahap properti border-top-width dari 1px menjadi 15px, lalu kembali: <p>
<div id = "myDIV"> </div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Bottom
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
bottom: 0px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {bottom: 300px;}
}
</style>
</head>
<body>
<h1>Animation of bottom property</h1>
<p> Secara bertahap ubah properti bawah dari 0px menjadi 300px, lalu kembali: <p>
<div id = "myDIV">
<h1> myDIV </h1>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {box-shadow: 10px 20px 30px blue;}
}
</style>
</head>
<body>
<h1>Animation of box-shadow</h1>
<p> Ubah properti box-shadow secara bertahap: <p>
<div id = "myDIV">
<h1> myDIV </h1>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Clip
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: green;
position: absolute;
animation: mymove 5s infinite;
clip: rect(0,100px,100px,0);
}
@keyframes mymove {
50% {clip: rect(0,50px,50px,0);}
}
</style>
</head>
<body>
<h1>Animation of clip</h1>
<div id = "myDIV">
<h1> myDIV </h1>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 300px;
color: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {color: blue;}
}
</style>
</head>
<body>
<h1>Animation of color</h1>
<p> Ubah warna teks secara bertahap dari merah menjadi biru, lalu kembali: <p>
<div id = "myDIV">
<h1> Ini adalah header </h1>
<p> Ini adalah paragraf </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Column-count
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 500px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {column-count: 5;}
}
</style>
</head>
<body>
<h1>Animation of column-count</h1>
<p> Ubah jumlah kolom dari 1 menjadi 5, lalu kembali: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti jumlah kolom. </p>
</body>
</html>
- Column-gap
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {column-gap: 100px;}
}
</style>
</head>
<body>
<h1>Animation of column-gap</h1>
<p> Ubah jarak antara kolom dari normal menjadi 100px, dan kembali ke normal: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti celah-kolom. </p>
</body>
</html>
- Column-rule
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
column-rule: 1px outset red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-rule: 50px outset blue;
}
}
</style>
</head>
<body>
<h1>Animation of column-rule</h1>
<p> Ubah aturan antar kolom secara bertahap: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> Properti aturan kolom adalah properti singkatan untuk semua properti aturan kolom. </p>
<p> Properti kolom-aturan-warna dan lebar-aturan-kolom <em> dapat dianimasikan </em> di CSS. </p>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti aturan kolom. </p>
</body>
</html>
- Column-rule-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
column-rule: 15px outset red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-rule-color: blue;
}
}
</style>
</head>
<body>
<h1>Animation of column-rule-color</h1>
<p> Ubah warna aturan secara bertahap antara kolom dari merah menjadi biru, dan kembali ke merah: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti kolom-aturan-warna. </p>
</body>
</html>
- Column-rule-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-count: 3;
column-rule: 1px outset red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-rule-width: 50px;
}
}
</style>
</head>
<body>
<h1>Animation of column-rule-width</h1>
<p> Secara bertahap ubah lebar aturan antara kolom dari 1px menjadi 50px, dan kembali ke 1px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti column-rule-width. </p>
</body>
</html>
- Column-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
column-width: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
column-width: 100px;
}
}
</style>
</head>
<body>
<h1>Animation of column-width</h1>
<p> Secara bertahap ubah lebar kolom dari 300px menjadi 100px, dan kembali ke 300px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti lebar kolom. </p>
</body>
</html>
- Columns
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
columns: 100px 5;
}
}
</style>
</head>
<body>
<h1>Animation of columns</h1>
<p> Ubah properti kolom secara bertahap: <p>
<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<p> Properti kolom adalah properti singkatan untuk mengatur properti kolom-count dan kolom-lebar. </p>
<p> <b> Catatan: </b> Edge tidak mendukung animasi pada properti kolom. </p>
</body>
</html>
- Filter
<!DOCTYPE html>
<html>
<head>
<style>
img {
animation: mymove 7s infinite;
}
@keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
</style>
</head>
<body>
<h1>Animation of filter</h1>
<p> Secara bertahap mengubah warna gambar menjadi hitam dan putih (100% skala abu-abu), dan kembali ke warna aslinya: <p>
<img src = "pineapple.jpg" alt = "Pineapple" width = "300" height = "300">
<p> <strong> Catatan: </strong> Properti filter tidak didukung di Edge 12 atau Internet Explorer. </p>
</body>
</html>
- Flex
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 270px;
height: 300px;
border: 1px solid black;
display: flex;
}
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex: 3;}
}
</style>
</head>
<body>
<h1>Animation of flex</h1>
<p> Secara bertahap ubah properti flex dari elemen div BLUE dari 1 menjadi 3, dan kembali: <p>
<div id = "main">
<div style = "background-color: coral;"> MERAH </div>
<div style = "background-color: lightblue;" id = "myBlueDiv"> BIRU </div>
<div style = "background-color: lightgreen;"> HIJAU </div>
</div>
<p> <b> Catatan: </b> Internet Explorer 10 mendukung alternatif, properti -ms-flex. IE11 dan versi yang lebih baru mendukung sepenuhnya properti flex (tidak memerlukan awalan -ms-). </p>
</body>
</html>
- Flex-basis
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 250px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex-basis: 200px;}
}
</style>
</head>
<body>
<h1>Animation of flex-basis</h1>
<p> Secara bertahap ubah properti flex-basis div BLUE dari 50px menjadi 200px, dan kembali: <p>
<div id = "main">
<div style = "background-color: coral;"> MERAH </div>
<div style = "background-color: lightblue;" id = "myBlueDiv"> BIRU </div>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Flex-grow
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex-grow: 8;}
}
</style>
</head>
<body>
<h1>Animation of flex-grow</h1>
<p> Ubah secara bertahap properti flex-grow "blue DIV" dari 1 menjadi 8, dan kembali ke 1: <p>
<div id = "main">
<div style = "background-color: coral;"> </div>
<div style = "background-color: lightblue;" id = "myBlueDiv"> </div>
<div style = "background-color: khaki;"> </div>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Flex-shrink
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
#myBlueDiv {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {flex-shrink: 8;}
}
</style>
</head>
<body>
<h1>Animation of flex-shrink</h1>
<p> Ubah secara bertahap properti flex-shrink "blue DIV" dari 1 menjadi 8, dan kembali ke 1: <p>
<div id = "main">
<div style = "background-color: coral;"> DIV Merah </div>
<div style = "background-color: lightblue;" id = "myBlueDiv"> DIV Biru </div>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Font
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font: 40px bold;}
}
</style>
</head>
<body>
<h1>Animation of font</h1>
<p> Ubah properti font secara bertahap: <p>
<div id = "myDIV">
<p> Ini adalah paragraf </p>
</div>
<p> Properti font adalah properti singkatan untuk semua properti font. </p>
<p> ukuran font, font-weight, font-stretch, dan line-height <em> dapat dianimasikan </em> di CSS. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Font-size
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font-size: 40px;}
}
</style>
</head>
<body>
<h1>Animation of font-size</h1>
<p> Mengubah ukuran fonta teks secara bertahap: <p>
<div id = "myDIV">
<p> Ini adalah paragraf </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Font-size-adjust
Tidak ada contoh kode!
- Font-stretch
Tidak ada contoh kode!
- Font-weight
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 400px;
height: 100px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {font-weight: bold;}
}
</style>
</head>
<body>
<h1>Animation of font-weight</h1>
<p> Secara bertahap ubah bobot font dari normal menjadi tebal, dan kembali ke normal: <p>
<div id = "myDIV">
<p> Ini adalah paragraf </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Grid
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid: auto / auto auto auto auto;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid: 100px / auto auto;}
}
</style>
</head>
<body>
<h1>Animation of the grid Property</h1>
<p> Animasi akan mengubah tata letak grid. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
- Grid-area
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-area: 1 / 2 / span 3 / span 2;}
}
</style>
</head>
<body>
<h1>Animation of the grid-area Property</h1>
<p> Animasi akan mengubah tampilan "item1". </ p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-auto-columns
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {
display: grid;
grid-auto-columns: 50px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-auto-columns: 100px;}
}
</style>
</head>
<body>
<h1>Animation of the grid-auto-columns Property</h1>
<p> Animasi akan mengubah ukuran kolom dari 50px menjadi 100px. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
- Grid-auto-flow
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-auto-flow: row;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-auto-flow: column;}
}
</style>
</head>
<body>
<h1>Animation of the grid-auto-flow Property</h1>
<p> Animasi akan mengubah aliran petak-otomatis dari baris ke kolom. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
</body>
</html>
- Grid-auto-rows
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
.grid-container {
display: grid;
grid-auto-rows: 150px;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-auto-rows: 100px;}
}
</style>
</head>
<body>
<h1>Animation of the grid-auto-rows Property</h1>
<p> Animasi akan mengubah ukuran baris dari 150px menjadi 100px. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
- Grid-column
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-column: 3 / span 3;}
}
</style>
</head>
<body>
<h1>Animation of the grid-column Property</h1>
<p> Animasi akan mengubah tampilan "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-column-end
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-end: span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-column-end: span 3;}
}
</style>
</head>
<body>
<h1>Animation of the grid-column-end Property</h1>
<p> Animasi akan mengubah tampilan "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-column-gap
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-column-gap: 100px;}
}
</style>
</head>
<body>
<h1>Animation of the grid-column-gap Property</h1>
<p> Animasi akan mengubah jarak antar kolom, dari 10px menjadi 100px. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-column-start
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-column-start: 3;}
}
</style>
</head>
<body>
<h1>Animation of the grid-column-start Property</h1>
<p> Animasi akan mengubah penempatan "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-gap
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-gap: 100px;}
}
</style>
</head>
<body>
<h1>Animation of the grid-gap Property</h1>
<p> Animasi akan mengubah jarak antar baris, dan jarak antar kolom, dari 10px menjadi 100px. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-row
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row: 1 / span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-row: 1 / span 3;}
}
</style>
</head>
<body>
<h1>Animation of the grid-row Property</h1>
<p> Animasi akan mengubah tampilan "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-row-end
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-end: span 2;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-row-end: span 3;}
}
</style>
</head>
<body>
<h1>Animation of the grid-row-end Property</h1>
<p> Animasi akan mengubah tampilan "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-row-gap
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-gap: 100px;}
}
</style>
</head>
<body>
<h1>Animation of the grid-gap Property</h1>
<p> Animasi akan mengubah jarak antar baris, dan jarak antar kolom, dari 10px menjadi 100px. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-row-start
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {grid-row-start: 3;}
}
</style>
</head>
<body>
<h1>Animation of the grid-row-start Property</h1>
<p> Animasi akan mengubah penempatan "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
- Grid-template
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template: auto / auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template: 100px / auto auto;}
}
</style>
</head>
<body>
<h1>Animation of the grid-template Property</h1>
<p> Animasi akan mengubah tata letak grid. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
- Grid-template-areas
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template-areas: '. . . myArea myArea';}
}
</style>
</head>
<body>
<h1>Animation of the grid-template-areas Property</h1>
<p> Animasi akan mengubah posisi "item1". </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
- Grid-template-columns
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template-columns: auto auto;}
}
</style>
</head>
<body>
<h1>Animation of the grid-template-columns Property</h1>
<p> Animasi akan mengubah jumlah kolom dari empat menjadi dua. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
- Grid-template-rows
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@keyframes mymove {
50% {grid-template-rows: 100px;}
}
</style>
</head>
<body>
<h1>Animation of the grid-template-rows Property</h1>
<p> Animasi akan mengubah ukuran baris pertama menjadi 100 piksel, dan sebaliknya. </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
- Height
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {height: 500px;}
}
</style>
</head>
<body>
<h1>Animation of height</h1>
<p> Secara bertahap ubah tinggi elemen DIV dari 100px menjadi 500px, dan kembali ke 100px: <p>
<div id = "myDIV">
<h1> DIV Saya </h1>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Left
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {left: 500px;}
}
</style>
</head>
<body>
<h1>Animation of left</h1>
<p> Secara bertahap ubah posisi kiri elemen DIV dari 0 menjadi 500px, dan kembali ke 0: <p>
<div id = "myDIV">
<h1> DIV Saya </h1>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Letter-spacing
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
letter-spacing: 2px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {letter-spacing: 50px;}
}
</style>
</head>
<body>
<h1> Animasi spasi-huruf </h1>
<p> Secara bertahap ubah properti spasi-huruf elemen DIV dari 2px hingga 50px, dan kembali ke 2px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Line-height
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
line-height: 16px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {line-height: 50px;}
}
</style>
</head>
<body>
<h1> Animasi ketinggian baris </h1>
<p> Secara bertahap ubah properti line-height dari elemen DIV dari 16px menjadi 50px, dan kembali ke 16px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Margin
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin: 50px;}
}
</style>
</head>
<body>
<h1>Animation of margin</h1>
<p> Secara bertahap ubah margin dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Ini adalah elemen DIV saya.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Margin-bottom
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-bottom: 50px;}
}
</style>
</head>
<body>
<h1>Animation of margin-bottom</h1>
<p> Secara bertahap ubah margin-bottom dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Ini adalah elemen DIV saya.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Margin-left
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-left: 50px;}
}
</style>
</head>
<body>
<h1>Animation of margin-left</h1>
<p> Secara bertahap ubah margin kiri dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Ini adalah elemen DIV saya.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Margin-right
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-right: 50px;}
}
</style>
</head>
<body>
<h1>Animation of margin-right</h1>
<p> Secara bertahap ubah margin-right dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Ini adalah elemen DIV saya.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Margin-top
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {margin-top: 50px;}
}
</style>
</head>
<body>
<h1>Animation of margin-top</h1>
<p> Secara bertahap ubah margin-top dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Ini adalah elemen DIV saya.
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Max-height
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {max-height: 100px;}
}
</style>
</head>
<body>
<h1>Animation of max-height</h1>
<p> Ubah tinggi maksimal dari "tidak ada" menjadi "100 piksel", dan kembali ke "tidak ada": <p>
<div id = "myDIV">
<p> Elemen DIV ini tidak memiliki ketinggian yang ditentukan sebelumnya. </p>
<p> Animasi akan mengubah tinggi maksimal, dari "tidak ada" menjadi "100 piksel". </p>
<p> Tinggi elemen DIV ini tidak akan melebihi 100 piksel. </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Max-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {max-width: 600px;}
}
</style>
</head>
<body>
<h1>Animation of max-width</h1>
<p> Ubah lebar-maksimal dari "none" menjadi "600px", dan kembali ke "none": <p>
<div id = "myDIV">
<p> Elemen DIV ini tidak memiliki lebar yang ditentukan sebelumnya. </p>
<p> Coba ubah ukuran jendela browser untuk melihat bahwa lebar elemen DIV ini akan bertambah / berkurang seiring dengan lebar pengubahan ukuran, tetapi lebarnya tidak akan pernah melebihi 600 piksel. </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Min-height
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 500px;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {min-height: 400px;}
}
</style>
</head>
<body>
<h1>Animation of min-height</h1>
<p> Ubah min-height dari "none" menjadi "400px", dan kembali ke "none": <p>
<div id = "myDIV">
<p> Elemen DIV ini tidak memiliki ketinggian yang ditentukan sebelumnya. </p>
<p> Animasi akan mengubah min-height, dari "none" menjadi "400px". </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Min-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 50%;
background-color: lightblue;
overflow: auto;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {min-width: 800px;}
}
</style>
</head>
<body>
<h1>Animation of min-width</h1>
<p> Ubah min-width dari "none" menjadi 800px, dan kembali ke "none": <p>
<p> <strong> Catatan: </strong> Properti min-width menggantikan properti width. </p>
<div id = "myDIV">
<p> Elemen DIV ini memiliki lebar yang ditentukan sebelumnya: 50%. </p>
<p> Animasi secara bertahap akan mengubah min-width menjadi 800 piksel. </p>
</div>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Object-position
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
width: 200px;
height: 400px;
object-fit: cover;
object-position: 0% 0%;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {
object-position: 0% 0%;
}
25% {
object-position: 20% 0%;
}
100% {
object-position: 100% 100%;
}
}
</style>
</head>
<body>
<h1>Animation of object-position</h1>
<p> Secara bertahap mengubah posisi gambar di dalam kotak isinya: <p>
<img src = "https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt = "ANIME" id = "myImg" width = "400" height = "300">
<p> Catatan: Properti object-position dan object-fit tidak didukung di Internet Explorer / Edge 15 atau yang lebih lama. </p>
</body>
</html>
- Opacity
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
top: 200px;
width: 300px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
#DIV2 {
position: absolute;
top: 180px;
left: 30px;
width: 300px;
height: 150px;
background-color: coral;
border: 1px solid black;
}
@keyframes mymove {
50% {opacity: 0;}
}
</style>
</head>
<body>
<h1>Animation of opacity</h1>
<p> Properti opacity adalah <em> animatable </em> di CSS. </p>
<p> <b> Catatan: </b> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
<p> Ubah opasitas elemen DIV biru dari 1 menjadi 0, dan kembali ke 1: <p>
<div id="DIV2">
<h1>Voila!</h1>
</div>
<div id="myDIV">
</div>
</body>
</html>
- Order
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #000000;
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
#myGreenDIV {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {order: 6;}
}
</style>
</head>
<body>
<h1>Animation of order</h1>
<p> Ubah urutan elemen DIV hijau dari 1 menjadi 6, dan kembali ke 1: <p>
<div id = "main">
<div style = "background-color: lightgreen; order: 1;" id = "myGreenDIV"> </div>
<div style = "background-color: coral; order: 2;"> </div>
<div style = "background-color: lightblue; order: 3;"> </div>
<div style = "background-color: pink; order: 4;"> </div>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Outline
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
outline: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline: 15px solid lightblue;}
}
</style>
</head>
<body>
<h1>Animation of outline</h1>
<p> Ubah properti garis besar secara bertahap: <p>
<div id = "myDIV"> </div>
<p> Properti outline adalah properti singkatan untuk semua properti outline. </p>
<p> Lihat properti garis individu untuk melihat mana yang <em> bisa dianimasikan </em>. </p>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Outline-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
outline: 15px solid red;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-color: blue;}
}
</style>
</head>
<body>
<h1>Animation of outline-color</h1>
<p> Ubah secara bertahap properti outline-color dari merah ke biru lalu kembali ke merah: <p>
<div id = "myDIV"> </div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Outline-offset
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-offset: 50px;}
}
</style>
</head>
<body>
<h1>Animation of outline-offset</h1>
<p> Secara bertahap ubah properti outline-offset dari 0 menjadi 50px, dan kembali ke 0: <p>
<div id = "myDIV"> </div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Outline-width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
outline: coral solid 5px;
width: 300px;
height: 300px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {outline-width: 50px;}
}
</style>
</head>
<body>
<h1>Animation of outline-width</h1>
<p> Secara bertahap ubah properti outline-width dari 5px menjadi 50px, dan kembali ke 5px: <p>
<div id = "myDIV"> </div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Padding
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding: 50px;}
}
</style>
</head>
<body>
<h1>Animation of padding</h1>
<p> Ubah padding secara bertahap dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ...
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Padding-bottom
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-bottom: 50px;}
}
</style>
</head>
<body>
<h1>Animation of padding-bottom</h1>
<p> Secara bertahap ubah padding-bottom, dari 0px menjadi 50px dan kembali ke 0px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ...
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Padding-left
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-left: 50px;}
}
</style>
</head>
<body>
<h1>Animation of padding-left</h1>
<p> Secara bertahap ubah padding-left dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ...
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Padding-right
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-right: 150px;}
}
</style>
</head>
<body>
<h1>Animation of padding-right</h1>
<p> Secara bertahap ubah padding-right dari 0px menjadi 150px, dan kembali ke 0px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ...
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Padding-top
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {padding-top: 50px;}
}
</style>
</head>
<body>
<h1>Animation of padding-top</h1>
<p> Secara bertahap ubah padding-top dari 0px menjadi 50px, dan kembali ke 0px: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ...
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Perspective
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
animation: mymove 5s infinite;
perspective: 200px;
}
@keyframes mymove {
50% {perspective: 100px;}
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1>Animation of perspective</h1>
<div id="div1">DIV1
<div id="div2">Think that you are looking down on a wall. See what happens when you gradually change the perspective!</div>
</div>
<p><strong>Note:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>\H- Perspective-origin
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 150px;
width: 250px;
padding: 10px;
border: 1px solid black;
perspective: 125px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {perspective-origin: 10px 50%;}
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: coral;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h1> Animasi perspektif-origin </h1>
<div id = "div1"> DIV1
<div id = "div2"> DIV2 </div>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Right
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {right: 500px;}
}
</style>
</head>
<body>
<h1>Animation of right</h1>
<p> Secara bertahap ubah posisi kanan elemen DIV dari 0 menjadi 500px, dan kembali ke 0: <p>
<div id = "myDIV">
<h1> DIV Saya </h1>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Text-decoration-color
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
text-decoration: underline;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
text-decoration-color: red;
}
}
</style>
</head>
<body>
<h1>Animation of text-decoration-color</h1>
<p> Ubah warna garis bawah secara bertahap dari hitam menjadi merah, dan punggung: <p>
<div id = "myDIV">
<p> Ini adalah paragraf </p>
</div>
<p> <strong> Catatan: </strong> Warna-dekorasi-teks tidak berfungsi Edge sebelum 79. </p>
</body>
</html>
- Text-indent
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: lightblue;
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {text-indent: 150px;}
}
</style>
</head>
<body>
<h1>Animation of text-indent</h1>
<p> Ubah indentasi teks secara bertahap dari 0 menjadi 150px, dan kembali ke 0: <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Text-shadow
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {text-shadow: 10px 20px 30px blue;}
}
</style>
</head>
<body>
<h1>Animation of text-shadow</h1>
<p> Ubah properti text-shadow secara bertahap: <p>
<div id = "myDIV">
<h1> Ini adalah header </h1>
<p> Ini adalah paragraf </p>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Top
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
top: 0;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {top: 300px;}
}
</style>
</head>
<body>
<h1>Animation of top</h1>
<p> Ubah properti teratas secara bertahap dari 0 menjadi 300px, lalu kembali ke 0: <p>
<div id = "myDIV">
<h1> myDIV </h1>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Transform
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {transform: rotate(180deg);}
}
</style>
</head>
<body>
<h1>Animation of transform</h1>
<p> Secara bertahap putar elemen DIV 180 derajat, dan mundur: <p>
<div id = "myDIV">
<h1> myDIV </h1>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Transform-origin
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 200px;
width: 200px;
margin: auto;
border: 1px solid black;
}
#DIV2 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: coral;
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg);
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {transform-origin: 0 0 0;}
}
#DIV2original {
position: absolute;
width: 150px;
height: 150px;
border: 1px dashed grey;
background-color: lightgrey;
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Animation of transform-origin</h1>
<p> Ubah secara bertahap transform-origin dari "50% 50% 0" menjadi "0 0 0", dan kembali: <p>
<p> <b> Catatan: </b> Elemen DIV abu-abu menunjukkan di mana elemen DIV2 akan berada tanpa transformasi. </p>
<div id = "DIV1"> DIV1
<div id = "DIV2original"> DIV2 </div> <div id = "DIV2"> DIV2 </div>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Vertical-align
<!DOCTYPE html>
<html>
<head>
<style>
#myIMG {
vertical-align: 50px;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {vertical-align: 100px;}
}
</style>
</head>
<body>
<h1>Animation of vertical-align</h1>
<p> Secara bertahap ubah properti perataan vertikal elemen gambar dari 0 menjadi 100px, dan kembali ke 0: <p>
<p> <img id = "myIMG" src = "https://dosenit.com/wp-content/uploads/2020/10/0dcd6f4e410a34465a2d611913199e50.gif" width = "32" height = "32">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</p>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Visibility
Tidak ada contoh kode!
- Width
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 120px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {width: 500px;}
}
</style>
</head>
<body>
<h1>Animation of width</h1>
<p> Secara bertahap ubah lebar elemen DIV dari 120px menjadi 500px, dan kembali ke 120px: <p>
<div id = "myDIV">
<h1> DIV Saya </h1>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Word-spacing
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {word-spacing: 50px;}
}
</style>
</head>
<body>
<h1>Animation of word-spacing</h1>
<p> Secara bertahap ubah spasi kata elemen div dari "normal" menjadi 50px, dan kembali ke "normal": <p>
<div id = "myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercise ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo execution. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisis. Nam pembebasan sementara dengan soluta nobis pilihan yang lain membuat semua ketidaknyamanan mendominasi id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; Ini biasa digunakan dalam beberapa informasi umum. Investigasi menunjukkan lectores legere me lius quod ii legunt saepius.
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
- Z-index
<!DOCTYPE html>
<html>
<head>
<style>
div {position: absolute;}
#container div {
background-color: lightblue;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#myBox {
opacity: 1;
background-color: coral;
z-index: 1;
animation: mymove 5s infinite linear;
}
@keyframes mymove {
50% {z-index: 5;}
}
</style>
</head>
<body style="position:absolute">
<h1>Animation of z-index</h1>
<p> Ubah secara bertahap properti z-index "myBox" dari 1 menjadi 5, dan kembali ke 1: <p>
<div id = "container">
<div id = "myBox"> myBox </div>
<div style = "top: 20px; left: 20px; z-index: 1;"> z-index 1 </div>
<div style = "top: 40px; left: 40px; z-index: 2;"> z-index 2 </div>
<div style = "top: 60px; left: 60px; z-index: 3;"> z-index 3 </div>
<div style = "top: 80px; left: 80px; z-index: 4;"> z-index 4 </div>
</div>
<p> <strong> Catatan: </strong> Animasi CSS tidak berfungsi di Internet Explorer 9 dan versi sebelumnya. </p>
</body>
</html>
