@charset "UTF-8";
/* Scss Document */
.box1 {
  width: 40px;
  height: 40px;
  background: skyblue;
  cursor: pointer;
  margin-bottom: 40px; }
  .box1:hover {
    transform: translate(20px, 10px); }

.box2 {
  width: 40px;
  height: 40px;
  background: #f78082;
  cursor: pointer;
  margin-bottom: 40px; }
  .box2:hover {
    transform: rotate(45deg); }

.box3 {
  width: 40px;
  height: 40px;
  background: #8277f8;
  cursor: pointer;
  margin-bottom: 80px; }
  .box3:hover {
    transform: scale(1.5) rotate(-45deg);
    transform-origin: left top; }

.box4 {
  width: 40px;
  height: 40px;
  background: #8277f8;
  cursor: pointer;
  margin: 80px;
  /*
  transition-property: transform, opacity;
  transition-duration: .4s, .4s;
  ↓省略
  transition: transform .4s, opacoty .4s;
  ↓省略
  transition: all .4s;
  ↓省略*/
  transition: .4s; }
  .box4:hover {
    transform: scale(1.5) rotate(-45deg);
    opacity: .3; }

.box {
  width: 40px;
  height: 40px;
  background: #a6ec64;
  cursor: pointer;
  margin: 40px 20px;
  transition: 2s;
  transition-timing-function: ease; }

.box.moved {
  transform: translate(400px, 0); }

.box6 {
  transition-timing-function: ease-out; }

.box7 {
  transition-timing-function: ease-in-out;
  height: 80px;
  width: 80px;
  background: #2a7310; }

.box8 {
  transition-timing-function: cubic-bezier(0, 0.95, 0.46, 1.33);
  height: 80px;
  width: 80px;
  background: #2a7310; }

.box9 {
  width: 40px;
  height: 40px;
  background: #ec2023;
  cursor: pointer;
  margin: 40px 20px; }

.box9.moved {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /*←無限ループ*/ }

@keyframes spin {
  0% {
    transform: none; }
  100% {
    transform: rotate(360deg); } }
.box10 {
  width: 80px;
  height: 80px;
  background: #c740c1;
  cursor: pointer;
  margin: 40px 20px; }

.box10.moved {
  animation-name: spin02;
  animation-duration: 1.5s;
  animation-iteration-count: 3;
  animation-timing-function: ease-in-out; }

@keyframes spin02 {
  0% {
    transform: none; }
  50% {
    transform: rotate(270deg) scale(0.8);
    border-radius: 50%; }
  75% {
    transform: rotate(320deg) scale(1.8); }
  100% {
    transform: rotate(360deg); } }
.box11 {
  width: 80px;
  height: 80px;
  background: #0c7df3;
  cursor: pointer;
  margin: 40px 20px; }

.box11.moved {
  animation-name: spin03;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  /*←逆再生*/
  animation-fill-mode: forwards;
  /*←終わった場で止まる*/ }

@keyframes spin03 {
  0% {
    transform: none; }
  50% {
    transform: rotate(270deg) scale(0.8);
    border-radius: 50%; }
  75% {
    transform: rotate(320deg) scale(1.8); }
  100% {
    transform: rotate(360deg) scale(0.2) translate(200px); } }