I have an animation that is linked below in the form of a fiddle. When you click the rectangle, it expands to fill the page.
The way I set it up causes it to trigger a close animation from the maximum size.
I want to make it so that if the user clicks it in the middle of the animation, it will trigger the close animation at that size.
Fiddle : [https://jsfiddle.net/48cvzaej/8/][1]
(sorry the CSS is a bit of a mess)
The only thought I have as to solving the problem is to store the value in js, then onClick, making the "from" position the last saved power.
Thanks for the help.
function soothingMessage()
{
if(page.style.animationName != "newPage")
{
page.style.animationName = "newPage";
}
else if(page.style.animationName == "newPage")
{
page.style.animationName = "newPageReverse";
}
}:root
{
--background-color: blue;
}
#page
{
margin: auto;
width: 50px;
height: 35px;
padding: 10px;
text-align: center;
border-radius: 10px;
background-color:aquamarine;
font-family: 'Roboto', sans-serif;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
animation-direction: reverse;
}
/* #page:hover
{
animation: subtleBoxChange 0.2s;
animation-fill-mode:forwards;
} */
#page
{
animation: null 1s forwards;
animation-fill-mode: forwards;
}
#text
{
text-align: center;
font-family: 'Roboto', sans-serif;
}
@keyframes null
{
}
@keyframes newPage
{
from{width: 50px;
height: 35px;
padding: 10px;
margin: auto;
border-radius: 10px; }
to{width: 100%;
height: 100vh;
padding: 0px;
margin: auto;
border-radius: 0px;}
}
@keyframes newPageReverse
{
to{width: 50px;
height: 35px;
padding: 10px;
margin: auto;
border-radius: 10px; }
from{width: 100%;
height: 100vh;
padding: 0px;
margin: auto;
border-radius: 0px;}
}
@keyframes subtleBoxChange
{
from {background-color:rgb(128, 255, 212);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 50px;
height: 35px;}
to{background-color:rgb(128, 255, 212);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
width: 60px;
height: 45px;}
}
@keyframes subtleBoxChangeReverse
{
from {background-color:rgb(128, 255, 212);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
width: 60px;
height: 45px;}
to{background-color:rgb(128, 255, 212);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 50px;
height: 35px;}
}<!DOCTYPE>
<html>
<div id = card>
<head>
<title>test</title>
</head>
<p id="page" onclick="soothingMessage()">
</p>
<p id="text">
</p>
</div>