通过线性渐变（纯CSS）实现动画的跷跷板效果

Question

I have an element with one diagonal side achieved by adjusting linear-gradient and height - in two different states. Now I try to toggle between these states and have a smooth transition of the red triangle, so that it would look like a seesaw :-) The problem is, that from one state to another it changes the direction and is jumpy, I did not find a way to animate it fluently .. Is there a way to to what I want using pure CSS eg using transitions?

 let btn = document.getElementsByTagName('button')[0]; let stage = document.getElementById('stage'); btn.addEventListener('click', function() { stage.classList.toggle('fixie'); }); 

 body, ul { padding: 0; margin: 0; } #stage { width: 100%; height: 14em; background: pink; padding: 0; border: 1px solid blue; } #stage::before { display: block; position: relative; width: 100%; height: 100%; /*as high as #stage*/ opacity: 0.4; content: ''; z-index: 1; background: linear-gradient(to left bottom, red 50%, pink 50%); /*transition: height 4s;*/ /*transition: linear-gradient 4s 8s;*/ } #stage.fixie::before { height: 30%; background: linear-gradient(to right bottom, red 50%, pink 50%); } 

 <div id="stage"></div> <button>animate gradient</button> 

Here is my FIDDLE

Answer 1

As you can't animate linear-gradient , here is a workaround using transform

In this sample I used skew . As the degree of skew will differ based on the width/height, and as long as its ratio is kept, this will be fully responsive, else you'll need a small script.

 (function(){ let btn = document.getElementsByTagName('button')[0]; let stage = document.getElementById('stage'); btn.addEventListener('click', function() { stage.classList.toggle('fixie'); }); })(); 

 body, ul { padding: 0; margin: 0; } #stage { position: relative; overflow: hidden; width: 90vw; height: calc(90vw * 0.2677); /* 0.2677, aspect ratio that match skew degree */ background: pink; padding: 0; border: 1px solid blue; } .navi { width: 100%; min-height: 4em; height: auto; background: green; z-index: 2; position: relative; } #stage::before { content: ''; position: absolute; width: 100%; height: 100%; /*as high as #stage*/ bottom: 100%; opacity: 0.4; z-index: 1; background: red; transform: skewY(15deg); transform-origin: left bottom; transition: transform 2s; } #stage.fixie::before { transform: skewY(-15deg) translateY(100%); } .navi ul { list-style: none; display: flex; background: lightblue; justify-content: flex-end; } .navi ul li { display: flex; align-items: center; justify-content: center; min-width: 4em; width: auto; height: 2em; margin: 1px; background: yellow; } 

 <div id="stage"></div> <button> animate </button> 

---

Side note:

One can use any fixed value instead of vw , as long as the #stage 's ratio is kept. If to change ratio, you'll either need a script, since CSS calc can't do math with sqrt and sin / cos etc. to get the angle, or using media query's, and have angle's and ratio's manually set for different screens.