Pausing Transitions

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

Pausing CSS transitions using a button with pure javascript and jQuery for a CSS Trick's article

This awesome code was written by 01, you can see more from this user in the personal repository.
You can find the original code on
Copyright 01 ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Pausing Transitions</title>
      <link rel="stylesheet" href="css/style.css">



  <figure class="ribbon ">
  <figcaption class="ribbon-content ribbonText">this is a dummy text</figcaption>

<figure class="ribbon">
  <figcaption class="ribbon-content ribbonText">this is a dummy text this is a dummy text this is a dummy text this is a dummy text this is a dummy text this is a dummy text</figcaption>
  <script src=''></script>




/*Downloaded from */
*::before {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: inherit;
body {
  height: 100%;
  width: 100%;
  font: 400 10px/1.25 Consolas;

.ribbon {
  font-size: 2rem !important;
  width: 20ch;
  position: relative;
  margin-bottom: 4em;
  left: 12em;
  background: rgba(224, 147, 59, 1);
  color: #fff;
  text-align: center;
  right: 0.5em;
  top: 4em;
  padding: 1.4ch 0.7ch;
  z-index: 99;
  min-height: 7.2em;
  display: flex;
  align-items: center;

.ribbon:after {
  right: 100%;
  border: 0 solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: rgba(224, 147, 59, 1);
  border-width: 3.6em;
  top: 50%;
  margin-top: -3.6em;

.ribbon .ribbon-content:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #999 transparent transparent transparent;
  bottom: -1em;
  right: 0;
  border-width: 1em 1em 0 0;