Transition

In this example below you will see how to do a Transition with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by elsylwio, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright elsylwio ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Transition</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /*
Animacja vs transition - w efekcie przejścia musimy użyć triggera, np najechanie kursorem na obszar, zaś w animacjach nie jest to potzebne, po prostu animujemy dany element.

Transition czyli płynne przejścia elementu. 
Zawsze należy użyć dwie sekcje kodu.
Pierwsza musi zawierać właściwości początkowe natomiast druga właściwości po zmianie.

Deklaracja:
transition: [transition-property (funkcja objęta płynnym przejściem)] [transition-duration]     [transition-timing-function - rozkład czasowy przejście] [transition-delay];

na jakich elementach mozemy nadac efekt transition
http://www.w3.org/TR/css3-transitions/#animatable-properties*/


.button
{
width:200px;
height:100px;
background:#CC99CC;
margin-top: 80px;
margin-left: 50px;
transition: all 2s;
}

.button:hover {
	width:400px;
  background: deepPink;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="button"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/elsylwio/transition-lfeaJ */
/*
Animacja vs transition - w efekcie przejścia musimy użyć triggera, np najechanie kursorem na obszar, zaś w animacjach nie jest to potzebne, po prostu animujemy dany element.

Transition czyli płynne przejścia elementu. 
Zawsze należy użyć dwie sekcje kodu.
Pierwsza musi zawierać właściwości początkowe natomiast druga właściwości po zmianie.

Deklaracja:
transition: [transition-property (funkcja objęta płynnym przejściem)] [transition-duration]     [transition-timing-function - rozkład czasowy przejście] [transition-delay];

na jakich elementach mozemy nadac efekt transition
http://www.w3.org/TR/css3-transitions/#animatable-properties*/


.button
{
width:200px;
height:100px;
background:#CC99CC;
margin-top: 80px;
margin-left: 50px;
transition: all 2s;
}

.button:hover {
	width:400px;
  background: deepPink;
}

Comments