JSFiddle - React, Tailwind, and code Playground

by ishikawa

HTML

<p class="fade_down">フェードダウン</p>

<a href="javascript: void(0)" onclick="fade_down()">click</a>

CSS

.fade_down {
  opacity: 0;
}

.fade_down_animation {
  animation-name: fadeDownAnimation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JavaScript

var fade_down = function () {
  $('.fade_down').addClass('fade_down_animation');
};