Mengenal Property Animation pada CSS

Halo teman-teman pada kesempatan kali ini kita akan Mengenal Property Animation pada CSS.

Property Animation adalah shorthand property untuk menseting longhand properties seperti dibawah ini:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

Diperlukan satu atau beberapa nilai yang dipisahkan koma, di mana setiap nilai memanggil dan mengontrol animasi @keyframes menggunakan properti Animation longhand. Aturan penggunaan @keyframes mendefinisikan urutan animasi yang sebenarnya, dan dikendalikan oleh properti animasi.

Contoh penulisan Syntax dari satu definisi Animation

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];

1 2	animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Contoh Penulisan Syntax secara Official

animation: <single-animation># 
/* where */
<single-animation> = <time> || <single-timing-function> || <time> ||
<single-animation-iteration-count> || <single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> || <single-animation-name>

animation: <single-animation>#

/* where */

<single-animation> = <time> || <single-timing-function> || <time> ||

<single-animation-iteration-count> || <single-animation-direction> ||

<single-animation-fill-mode> ||

<single-animation-play-state> || <single-animation-name>

Initial:Â tidak ada 0s memudahkan 0s 1 tidak ada yang normal; yang merupakan gabungan dari nilai awal dari masing-masing properti longhand
Applies To: Semua element HTML; dan ::before serta::after pseudo-elements

Penjelasan Value <single-animation>

Satu atau beberapa definisi animasi yang dipisahkan koma, di mana setiap definisi didefinisikan menggunakan properti animasi longhand. Lihat properti longhand untuk informasi lebih lanjut tentang nilai yang mungkin untuk masing-masing.

Contoh berikut menerapkan efek â€˜falling downâ€™ ke bagian teks menggunakan properti animasi shorthand.

Cek @keyframes untuk informasi lebih lanjut tentang bagaimana efek animasi dibuat, dan untuk lebih banyak contoh animasi.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Gentium Basic', serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.text {
  font-size: 3em;
  font-weight: bold;
  color: #009966;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: fall 4s infinite;
  animation: fall 4s infinite;
}

@-webkit-keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,
  60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,
  to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

@keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,
  60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,
  to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}
	</style>
</head>
<body>
	

<div class="container">
  <p class="text">
    Falling Text
  </p>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);

body {

background-color: #F5F5F5;

color: #555;

font-size: 1.1em;

font-family: 'Gentium Basic', serif;

}

.container {

margin: 50px auto;

max-width: 700px;

}

.text {

font-size: 3em;

font-weight: bold;

color: #009966;

-webkit-transform-origin: left center;

-ms-transform-origin: left center;

transform-origin: left center;

-webkit-animation: fall 4s infinite;

animation: fall 4s infinite;

}

@-webkit-keyframes fall {

from, 15% {

-webkit-transform: rotate(0) translateX(0);

transform: rotate(0) translateX(0);

opacity: 1;

-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);

animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);

}

50%,

60% {

-webkit-transform: rotate(90deg) translateX(0);

transform: rotate(90deg) translateX(0);

opacity: 1;

-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);

animation-timing-function: cubic-bezier(.13, .84, .82, 1);

}

85%,

to {

-webkit-transform: rotate(90deg) translateX(200px);

transform: rotate(90deg) translateX(200px);

opacity: 0;

}

@keyframes fall {

from, 15% {

-webkit-transform: rotate(0) translateX(0);

transform: rotate(0) translateX(0);

opacity: 1;

-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);

animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);

}

50%,

60% {

-webkit-transform: rotate(90deg) translateX(0);

transform: rotate(90deg) translateX(0);

opacity: 1;

-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);

animation-timing-function: cubic-bezier(.13, .84, .82, 1);

}

85%,

to {

-webkit-transform: rotate(90deg) translateX(200px);

transform: rotate(90deg) translateX(200px);

opacity: 0;

}

</style>

</head>

<body>

Falling Text

</p>

</div>

</body>

</html>

Semoga bermanfaat. Happy Coding!

Facebook DUMET School

Categories