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;
  transform: translateY(-100px);
  transition: opacity 1.4s cubic-bezier(0.5, 1, 0.89, 1), transform 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition-delay: 0.25s;
}

.fade_down_animation {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

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