CSS animation discussion

[codeispoetry]

@PaulOB

The clicked class merely modified the transform position of the hide class. The transition is already applied and needs no further mention.

Got it. Thanks.
Transition will work based on translateX: dimension, which is variable based on the presence of .hide or body.clicked .hide. Here transition is always true, but translate is changing based on this class: clicked, and hence translate direction = animation from left to right or right to left.

[codeispoetry]

Hi there, There is another HTML here.
There is a one-click scroll to the top arrow, which is an SVG.

the markup is like this →

Current situation:

.arrowScrollUp {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;    
    text-decoration: none;
    animation-name: scrollup;
    animation-duration: 1s;
}
@keyframes scrollup {
    0%   { right:0;}
    100% { right:1.25em;}
}

In this also I was trying to get rid of keyframe animation because animation is one-sided, when disappearing the disappearance is immediate and sudden.

I tried something like this:

#arrowScrollUp {
    bottom: 1.25em;
    display: block;
    position: fixed;
    width: 3.125em;
    height: 3.125em;
    transform: translateX(100vw);
    transition: transform 1s ease;
}

.arrowScrollUp {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;   
    transform: translateX(0vw); 
}

It is JS which is injecting extra class:.arrowScrollUp when the condition is true, is discussion was done here →

Javascript window scroll movement capture upscroll without JQuery

Just use this: html, body { scroll-behavior: smooth; }

[PaulOB]

I would move it up from the bottom as moving off to the right is probably going to give a scrollbar on small screen. Then yo can just do this.

#arrowScrollUp{
    position: fixed;
    bottom: -3.5em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;
    text-decoration: none;
    transition:all 1s ease;
     
}
#arrowScrollUp.arrowScrollUp {
    bottom: 1.25em;
}

[codeispoetry]

@PaulOB

I would move it up from the bottom as moving off to the right is probably going to give a scrollbar

Thank you so much, sir. I will remember this.

Hopefully, I will have prudence and experience someday to accomplish this immediately. It is always great and very precise learning with you.

Your solutions and suggestions for a better version are always very crisp.

[codeispoetry]

Hi there, I created a simple toggle button. Doing well, but could achieve the target animation effect.

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');

body, html {
  background: #EFEFEf;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
  font-family: 'Lato', sans-serif;
}

.btn {
  border: 3px solid #1A1A1A;
  display: inline-block;
  padding: 10px;
  text-align: center;
  min-width: 60px;
  transition: background-color 600ms ease, color 600ms ease;
}

input[type=radio].toggle {
  display: none;
}
input[type=radio]:checked.toggle.toggle-left + label {
  background-color: #1A1A1A;
  border-right: 0px;
  color: #FFFFFF;
}
input[type=radio]:checked.toggle.toggle-right + label {
  background-color: #1A1A1A;
  border-left: 0px;
  color: #FFFFFF;
}

HTML→

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Yes</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">No</label>	

My anticpation that I couldnot fullfil is: Background color should be visualized as shutter and when we click radios thats shutter should move from left to right, and right to left.

[PaulOB]

@codeispoetry

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Yes</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">No</label>	

You can do it with keyframes like this.

That is simpler but the drawback is that you see the keyframe animation on page load

You can avoid that initial move with a transition like this but is a little more complex:

[PaulOB]

For modern browsers (not ie11) you can add mix-blend mode for the color change of the text so it changes as the background goes over it.