Animação Interativa - CSS Transitions

animacao-interativa-css-transitions.markdown

Animação Interativa - CSS Transitions

A Pen by fabioluzm on CodePen.

License.

index.html

<div class="trigger">
  <div class="box"></div>
</div>

script.js

$(".trigger").on("click", function() {
  $(this).toggleClass("clicked");
});

scripts

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

style.css

body {
  padding: 50px;
}

.trigger {
  width: 200px;
  height: 200px;
  border: 20px solid #999;
  background: #ddd;
}

.box {
  display: inline-block;
  background: pink;
  width: 200px;
  height: 200px;
  transition: -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
  transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
  transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97), -webkit-transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97);
  pointer-events: none;
}

.trigger.clicked .box {
  -webkit-transform: translate(200px, 150px) rotate(20deg);
          transform: translate(200px, 150px) rotate(20deg);
}