- Judul - Kotak Animasi ----👉👉👉
Tulis bmtt di sini..!
Praktek langsung ....
<ieu bmtt-dimulai[[--!Selesai<!doctype html DRCJGTEA "-//DURIDWANCIJAGONG.CO.ID//DRC BMTT 1.0 Priit//ID-SUNDA" "DuridwanGurunaTafkar-Yapista-TeA"><html><head><judul>CSS Kotak Animasi</judul><style>div {width: 100px;height: 100px;background-color: red;animation-name: drcjgkotakanimasi;animation-duration: 4s;}@keyframes drcjgkotakanimasi {from {background-color: red;}to {background-color: yellow;}}#dianimasikan_divku {width: 150px;height: 47px;background: #92B901;color: #ffffff;position: relative;font-weight: bold;font-size: 20px;padding: 10px;animation: animated_div 5s 1;-moz-animation: animated_div 5s 1;-webkit-animation: animated_div 5s 1;-o-animation: animated_div 5s 1;border-radius: 5px;-webkit-border-radius: 5px;}#dianimasikan_divku {width:210px;height:47px;background: #92B901;color: #ffffff;position: relative;font-weight:bold;font-size:20px;padding:10px;animation:dianimasikan_divku 5s 1;-moz-animation:dianimasikan_divku 5s 1;-webkit-animation:dianimasikan_divku 5s 1;-o-animation:dianimasikan_divku 5s 1;border-radius:5px;-webkit-border-radius:5px;justify-content: center; /* align horizontal */align-items: center; /* align vertical */text-align: center; /* text ditengah-tengah */}@keyframes dianimasikan_divku{0% {transform: rotate(0deg);left:0px;}25% {transform: rotate(20deg);left:0px;}50% {transform: rotate(0deg);left:500px;}55% {transform: rotate(0deg);left:500px;}70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}100% {transform: rotate(-360deg);left:0px;}}@-webkit-keyframes dianimasikan_divku{0% {-webkit-transform: rotate(0deg);left:0px;}25% {-webkit-transform: rotate(20deg);left:0px;}50% {-webkit-transform: rotate(0deg);left:500px;}55% {-webkit-transform: rotate(0deg);left:500px;}70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}100% {-webkit-transform: rotate(-360deg);left:0px;}}@-moz-keyframes dianimasikan_divku{0% {-moz-transform: rotate(0deg);left:0px;}25% {-moz-transform: rotate(20deg);left:0px;}50% {-moz-transform: rotate(0deg);left:500px;}55% {-moz-transform: rotate(0deg);left:500px;}70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}100% {-moz-transform: rotate(-360deg);left:0px;}}@-o-keyframes dianimasikan_divku{0% {transform: rotate(0deg);left:0px;}25% {transform: rotate(20deg);left:0px;}50% {transform: rotate(0deg);left:500px;}55% {transform: rotate(0deg);left:500px;}70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}100% {transform: rotate(-360deg);left:0px;}}</style></head><body><h1>CSS Kotak Animasi</h1><div></div><div id="dianimasikan_divku">Popi Syapiah TeA</div><p><b>Catatan:</b> Ketika animasi selesai, maka akan kembali ke semula.</p></body></html>!--]]</diakhiri-bmtt ieu>
Seperti di bawah ini
CSS Kotak Animasi
Dudi Ridwan TeA
Catatan: Ketika animasi selesai, maka akan kembali ke semula.
Tidak ada komentar:
Posting Komentar