How to animate sections in pure CSS when scrolling the page?

Tags: html,css,html5,css3

Problem :

I am looking for a way to animate (with @keyframes, transform...) some elements when the user scrolls the page. For example:

  • When offset is 0: div has height: 100px.
  • When offset is between 0 and 100: div is height: 50px and color: blue.
  • And so on...

Is is possible using pure CSS? If it is not, what are the most efficient ways to do it with HTML or Javascript?

Solution :

The most efficient way to animate an element's style properties depending on scroll position will probably be to add a class with a scroll function:

Working Example

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y > 500) {
    // = "blue"; // you can add individual styles 
    myID.className = "blue" // or add classes
  } else {
    // = "red";
    myID.className = "red"

window.addEventListener("scroll", myScrollFunc);
body {
  height: 1100px;
#myID {
  position: fixed;
  height: 100px;
  line-height: 20px;
  transition: all 1s;
.blue {
  background: blue;
  animation: myAnimation 1s both;
.red {
  background: red;
@keyframes myAnimation {
  0% {
    border-radius: 0px;
    line-height: 10px;
  100% {
    border-radius: 100%;
    line-height: 100px;
<div id="myID" class="red">Hello world</div>



    CSS Howto..

    How to animate searchbox length from focusing on the textbox class CSS3?

    How to make CSS image transition smooth?

    How to remove some css properties without the paticular one using regular expression?

    how to display image on mouse over by css

    Quick beginner CSS, how to “scope” styles?

    How to use font-family with same name?

    How to Change the Color of Selected Content

    How to center a 3 column Css Div Site?

    How can I style this php with divs?

    How to spread three columns in CSS across a page equally

    How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

    How to center an isometric grid on a background with CSS/JS

    How to use CSS in Bootstrap to load a logo in the nav-brand class and have it centred?

    Bootstrap CSS - How to get control label with inline radios below it

    How to disable a CSS class with javascript on window.load()

    How do I select a css element with a text not attached to the attribute?

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    How to extract class names from a CSS selector?

    How can I request a CSS attribut in HtmlUnit?

    How to add rows to a responsive grid

    CSS - How to break long words in a table td?

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”

    How to include SASS into CSS

    How to avoid css transformation(rotate) when removing class?

    How to set div height to 100% of chosen print paper?

    How do I remove the extra height in my
  • ?
  • How Can I get my DL to style properly?

    How to select element by order ? - Css

    how to animate a text in javafx using css?

    CSS and jQuery - how to force 2 rules to work together