Can I start this simple CSS transition without using javascript

Question

This is a simple CSS transition.

div.simple_transition {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 5s;
  &:hover {
    width: 100%;
  }
}

<h1>Simple Transition</h1>
<p>NoJS Animation starts when hovering the element</p>
<div class="simple_transition"></div>
<p>
  <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

So I want it to start the transition programmatically for example right after the browser loads the page without using the mouse hover css selector. I know that I can do this with javascript and I managed to do this with a simple code.

//Based on https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
$(document).ready(function() {
  var elm = $('div.simple_transition');
  elm.attr('class', 'should-be-likethis');
  console.log('working on it');
});

div.simple_transition {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 5s;
  &:hover {
    width: 100%;
  }
}

.should-be-likethis {
  -webkit-transition: width 5s;
  /* For Safari 3.1 to 6.0 */
  transition: width 5s;
  width: 100%;
  height: 100px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h1>Simple Transition</h1>

<p id='text'>With jQuery animation starts without hovering the element</p>
<div class="simple_transition"></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

Can I do this without using javascript only with CSS? In fact in my current project I am already using javascript (ajax) for handling some data-related queries and I am also using a sass compiler so I would prefer that to write everything that is related to the styles in a CSS.

Maybe what you want is an animation instead of a transition, as @TemaniAfif suggested? You can also add a small delay to this animation if you feel like: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay — gtramontina, Feb 13 '19 at 22:46
Thanks for the info about the delay, @ Andy Hoffman answer worked like a charm for me and @Temani Afif was right when he said "use animation with forwards" now I get what he was talking about :). — Aness, Feb 14 '19 at 07:21

Andy Hoffman · Accepted Answer · 2019-02-13T22:50:41.777

3

I changed your class name to match the new behavior (animation, not a transition). We're animating from 100px to the full width of the viewport.

html, body { margin: 0; } /* Prevent scrollbar */

div.simple_animation {
  width: 100px;
  height: 100px;
  background: red;
  animation: 5s loading forwards;
}

@keyframes loading {
  to {
    width: 100vw;
  }
}

<div class="simple_animation"></div>

jsFiddle

edited Feb 13 '19 at 22:50

answered Feb 13 '19 at 22:45

Andy Hoffman

18,436
4
42
61

score 0 · Answer 2 · answered Feb 13 '19 at 22:47

0

css

.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

I have been out of web development a bit, but I think this works on most modern browsers

answered Feb 13 '19 at 22:47

brad

993
7
10

Can I start this simple CSS transition without using javascript

2 Answers2