Cara Membuat Transitions & Animations

Salah satu evolusi dengan CSS3 adalah kemampuan untuk menulis perilaku untuk transisi dan animasi. Pengembang front end telah meminta kemampuan untuk merancang interaksi tersebut dalam HTML dan CSS, tanpa menggunakan JavaScript atau Flash.

Dengan transisi CSS3 Anda memiliki potensi untuk mengubah penampilan dan perilaku elemen setiap kali perubahan bentuk terjadi, seperti ketika melayang di atas, berfokus pada, aktif, atau ditargetkan.

Animasi dalam CSS3 memungkinkan penampilan dan perilaku elemen yang akan diubah dalam beberapa keyframes. Transisi memberikan perubahan dari satu bentuk ke bentuk yang lain, sedangkan animasi dapat mengatur beberapa titik transisi pada keyframes yang berbeda.

1. Transisi
Seperti disebutkan, untuk transisi berlangsung, elemen harus memiliki perubahan dalam negara, dan gaya yang berbeda harus diidentifikasi untuk masing-masing negara. Cara termudah untuk menentukan gaya yang berbeda adalah dengan menggunakan: hover,: fokus,: aktif, dan: Target pseudo-kelas.

Ada empat sifat transisi terkait secara total, termasuk transisi-properti, transisi durasi, transisi-waktu-fungsi, dan transisi-delay. Tidak semua ini diperlukan untuk membangun transisi, dengan tiga pertama adalah yang paling populer.

Pada contoh di bawah kotak akan berubah warna latar belakang selama 1 detik secara linear.

CODE CSS & HTML

<style>
.box {
  background: orange;
  border-radius: 6px;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  width: 95px;
}
.box:hover {
  background: red;
}
</style>
<div class="box">Box</div>

Result

Box

2. Properti transisi
Properti transisi-properti menentukan apa properti akan diubah dalam hubungannya dengan sifat transisi lainnya. Secara default, semua properti dalam negara yang berbeda elemen yang akan diubah setelah perubahan. Namun, hanya sifat diidentifikasi dalam nilai transisi-properti akan terpengaruh oleh transisi. 

Dalam contoh di atas, properti background diidentifikasi dalam nilai transisi-properti. Berikut properti background adalah satu-satunya properti yang akan berubah selama durasi 1 detik secara linear. Properti lainnya termasuk ketika mengubah negara elemen, tetapi tidak termasuk dalam nilai transisi-properti, tidak akan menerima perilaku transisi yang ditetapkan oleh transisi-transisi atau durasi-waktu-fungsi properti.

Jika beberapa properti perlu beralih mereka mungkin dipisahkan koma dalam nilai transisi-properti. Selain itu, nilai kata kunci semua dapat digunakan untuk transisi semua properti dari elemen.

CODE CSS & HTML

<style>
.box {
  background: orange;
  border-radius: 6px;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  transition-property: background, border-radius;
  transition-duration: 1s;
  transition-timing-function: linear;
  width: 95px;
}
.box:hover {
  background: red;
  border-radius: 50%;
}
</style>
<div class="box">Box</div>

Box

3. Transitional Button
CODE CSS & HTML

<style>
.button {
  border: 0;
  background: orange;
  border-radius: 25px;
  box-shadow: 0 5px 0 #ccc;
  color: #006599;
  cursor: pointer;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 12px 20px;
  transition: all .1s linear;
  width:95px;
}
.button:active {
  box-shadow: 0 2px 0 #006599;
  transform: translateY(3px);
}
</style>
<div class="button">CLICK HERE</div>

Result

CLICK HERE

4. Card Flip
CODE CSS & HTML

<style>
.card-container {
  cursor: pointer;
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.card .back {
  background: #eaeaed;
  color: #0087cc;
  line-height: 150px;
  text-align: center;
  transform: rotateY(180deg);
}
</style>
<div class="card-container">
  <div class="card">
    <div class="side"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVnCQq7KpW12p7sIyq7Lery28_JMmgahjS9AMkeprgsept5tjF36VG7TJXtmGIJ0LIHA8eEI_fjG_eL8Z_v_3OGKkFDSgutmNWQ9Z36rXzoTfMMVZYBKyWhsGZWmoaiINzi96hQ_E_vE/s1600/A&A.jpg" height="100%" width="100%"></div>
    <div class="side back">NO IMAGE</div>
  </div>
</div>

Result

NO IMAGE

5. Animations BOLA
CODE CSS

<style type="text/css">
#contentContainer {
    width: 100%;
    height: 95%;
    border: 1px solid #ccc;
    overflow: hidden;
    background-color: #F2F2F2;
    cursor: pointer;
}
#thing {
    position: relative;
    left: 50px;
    top: 50px;
    transition: left .5s ease-in, top .5s ease-in;
}
</style>

CODE HTML

<div id="contentContainer">
    <img id="thing" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sxJFHBERNzfcIPrCT5o4pkKZ75JIKkv7ugZDd89Iu-yMkiKOk23iEpDlY3kvZxAAoIhsDB5hbwmcbcSNjNNhsiC-cs-L87bv4EVh2syjvA1BfVTZRXprcilp-GX5DVnJRQcN4SzgxFU/s1600/bola+voli.png" height="50" width="50">
</div>

CODE JS

<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");

container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
    var parentPosition = getPosition(e.currentTarget);
    var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
     
    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
      
    while (element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}
</script>

Result