CODEWITHSUNDEEP
javascripthtmlcss
LikeToLearnStuff
LikeToLearnStuff

Reputation: 63

Changing a css animation so that it automatically runs after a specific time

Is it possible using JavaScript to make the animation run automatically and stay changed (ie not resetting) after say 2 seconds?

I've tried using the following:

  element.style.WebkitAnimationPlayState = "paused";

and

  element.style.WebkitAnimationPlayState = "running";

However it did not work. Any other suggestions appreciated.

.spin {
     width: 5em;
      height: 5em;
     padding: 0;
    }
    .spin:hover {
      color: #0eb7da;
    }
    .spin::before, .spin::after {
    top: 0;
    left: 0;
     }
    .spin::before {
      border: 2px solid transparent;
    }
    .spin:hover::before {
      border-top-color: #0eb7da;
      border-right-color: #0eb7da;
      border-bottom-color: #0eb7da;
      -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
      transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
    }
    .spin::after {
      border: 0 solid transparent;
    }
    .spin:hover::after {
      border-top: 2px solid #0eb7da;
      border-left-width: 2px;
      border-right-width: 2px;
      -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
      -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
      transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
      transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
      transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
    }

    .circle {
      border-radius: 100%;
      box-shadow: none;
    }
    .circle::before, .circle::after {
      border-radius: 100%;
    }

    button {
      background: none;
      border: 0;
      box-sizing: border-box;
      box-shadow: inset 0 0 0 2px #f45e61;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
      margin: 1em;
      padding: 1em 2em;
      text-align: center;
      text-transform: capitalize;
      position: relative;
      vertical-align: middle;
    }

    button::before, button::after {
      box-sizing: border-box;
      content: '';
      position: absolute;
     width: 100%;
      height: 100%;
        }
<button class="spin circle">spin circle</button>

Upvotes: 1

Views: 137

Answers (3)

Carl Edwards
Carl Edwards

Reputation: 14434

Replace your :hover selectors with an additional active class and with a little javascript you should be good:

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.spin');
  
  setTimeout(function() {
    button.className += ' active';
  }, 2000);
});
.spin {
  width: 5em;
  height: 5em;
  padding: 0;
}

.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}

.spin::after {
  border: 0 solid transparent;
}

.spin.active {
  color: #0eb7da;
}

.spin.active::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

.spin.active::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
<button class="spin circle">spin circle</button>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105863

In CSS, you can set a hudge delay to freeze alike the animation on the defaut state (not :hover).

.spin {
  width: 5em;
  height: 5em;
  padding: 0;
}
.spin:hover {
  color: #0eb7da;
}
.spin::before,
.spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
  transition-delay: 99999s
}
.spin:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
  transition-delay: 99999s
}
.spin:hover::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before,
.circle::after {
  border-radius: 100%;
}
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  position: relative;
  vertical-align: middle;
}
button::before,
button::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
<button class="spin circle">spin circle</button>

.spin::before {
  border: 2px solid transparent;
  transition-delay: 99999s/* whatever you think long enough to hold the transition to be back to initial state */
}
.spin::after {
  border: 0 solid transparent;
  transition-delay: 99999s
}

https://jsfiddle.net/en53matp/3/

Upvotes: 0

Andy F
Andy F

Reputation: 1517

Rather than using the :hover state you could use javascript to add a class (say, .active) and replace the .spin:hover css with .spin.active

Here's a jQuery example:

$('button').on('click', function() {
   $(this).addClass('active');
});

Here's an example fiddle that might help do what you want: https://jsfiddle.net/en53matp/1/

Upvotes: 1

Related Questions