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

Thumbnail
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 Codepen.io
Copyright 01 ©

Technologies

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

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

  
</head>

<body>

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

<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>
</figure>
  <script src='http://code.jquery.com/jquery-2.0.0.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/01/pausing-transitions-zpzmyq */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: inherit;
}
html,
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;
}

Comments