Put a hold on non-animatable CSS attributes

Question

Put a hold on non-animatable CSS attributes

I am facing an issue with an animation that extends beyond the body, while the situations before and after the animation may or may not do so. I considered applying overflow:hidden; to the body element (which is set to match the viewport height), but if the content does overflow the body, I want a scrollbar to appear at the end of the animation.

My proposed solution was to use transition:overflow 0s ease 0.5s in order to delay the overflow property, hiding everything during the animation and then setting it to initial or visible once the animation has finished, allowing the scrollbar to appear only when necessary. However, this approach does not work because overflow is not an animatable property. So my question is, can non-animatable properties be delayed using pure CSS?

html css

Answer 1

Answer №1

Simply put, achieving this solely with html/css is not possible. However, there is a workaround that can somewhat replicate the effect.

You could utilize the max-height property to mimic a similar outcome, although it might seem unconventional as you would have to set the max-height to a value large enough to accommodate all text.

.test {
  max-height: 50px;
  width: 150px;
  background: tomato;
  overflow: hidden;
  transition: all 0.8s, max-height 3s 5s;
}
.test:hover {
  background: blue;
  max-height: 500px;
}

<div class="test">I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic!</div>

If feasible, an alternative approach would involve using a simple script. For instance, utilizing the setTimeout method:

$(document).ready(function() {
  $('.test').hover(function() {
    setTimeout(function() {
      $('.test').addClass("hovered");
    }, 3000);
  });
});

.test {
  height: 50px;
  width: 150px;
  background: tomato;
  overflow: hidden;
  transition: all 0.8s;
}
.test:hover {
  background: blue;
}
.hovered {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic!</div>

Answer 2

Simply put, achieving this solely with html/css is not possible. However, there is a workaround that can somewhat replicate the effect.

You could utilize the max-height property to mimic a similar outcome, although it might seem unconventional as you would have to set the max-height to a value large enough to accommodate all text.

.test {
  max-height: 50px;
  width: 150px;
  background: tomato;
  overflow: hidden;
  transition: all 0.8s, max-height 3s 5s;
}
.test:hover {
  background: blue;
  max-height: 500px;
}

<div class="test">I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic!</div>

If feasible, an alternative approach would involve using a simple script. For instance, utilizing the setTimeout method:

$(document).ready(function() {
  $('.test').hover(function() {
    setTimeout(function() {
      $('.test').addClass("hovered");
    }, 3000);
  });
});

.test {
  height: 50px;
  width: 150px;
  background: tomato;
  overflow: hidden;
  transition: all 0.8s;
}
.test:hover {
  background: blue;
}
.hovered {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic!</div>

Answer 3

Answer №2

One effective approach is to initially set the opacity to 0 and then use a hover effect to transition it to 1, creating the desired outcome.

Answer 4

One effective approach is to initially set the opacity to 0 and then use a hover effect to transition it to 1, creating the desired outcome.

Answer 5

Answer №3

I encountered a similar issue:

.example {
 transition: all 1s ease;
 overflow:hidden;
 max-height: 0;
}
.example.withAnimation {
 max-height: 300px;
}
.example.withAnimation:after {
 overflow:inherit;
}

Answer 6

I encountered a similar issue:

.example {
 transition: all 1s ease;
 overflow:hidden;
 max-height: 0;
}
.example.withAnimation {
 max-height: 300px;
}
.example.withAnimation:after {
 overflow:inherit;
}

Put a hold on non-animatable CSS attributes

Answer №1

Answer №2

Answer №3

Similar questions

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

What's the best way to trigger an alert popup after calling another function?

The alert box fails to display in the correct orientation when the condition is activated

Error in scrolling previews detected in Jssor horizontal template maker

Instructions for adding a Key every time a user clicks the space Key within an Input field

Is there a way for me to obtain latitude at the upper boundary of mapbox?

Vertical spacing on elements utilizing a position of absolute

Utilizing Media Queries with Dynamic Vue Properties

How can you ensure that an element returns to its original position after being animated in jQuery?

Combine and store downloaded stylesheets in the browser into a single file

Is there a way to pass a variable from a Django view to an HTML page using Ajax when the user presses a key

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

What is the best way to align dynamically generated divs seamlessly together?

Optimizing Rendering Performance: Comparing the Impact of Multiple Stylesheets vs. Single Dynamic CSS on Dynamic CSS

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

Function cannot be triggered by pressing the ENTER key

Background image for input button in Internet Explorer 6

Tips for customizing the appearance of the active item in the navigation bar

Tips on how to properly format a DateTime String

what is the best way to change background image in media query for various screen sizes?