I'm learning CSS and playing with TranslateY
I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below
.slideIn{
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.
However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like
.growMore{
animation: grow-more 0.5s forwards;
}
#keyframes grow-more {
0% { height:100%; }
100% { height: 150%; }
}
I did try adding another TranslateY but it also gave no result, hence why I tried with height
Is this possible?
Related
I have this strange bug in MSIE11, where an animated element disappears right after the end of an animation.
See this example
.cta-43274891247129739-info {
position: absolute;
left: 0;
top: 50px;
margin: 10px 10px;
animation: cta-43274891247129739 4s 1s both ease-out;
text-align: center;
}
#keyframes cta-43274891247129739 {
0% {
transform: translateY(1em);
opacity: 0;
}
16.6667%, 83.3333% {
opacity: 1;
transform: translateY(0em);
}
100% {
transform: translateY(-40px);
}
}
<div class="cta-43274891247129739-info">This animation fades in from the bottom, makes a short stop and then translates up to its final halt. But not on MSIE11, where it will dissappear apruptely at the end of the animation </div>
MSIE11 has issues with animations, particularly with calculations involving different units.
In your particular example, the animation works perfectly, until the very last keyframe. After reaching 100%, it seems like the text has disappeared, but its actually still there, only moved up by 40em.
So the workflow looks something like this:
moves up by 1em => moves up by 0em => moves up by 40px => moves up by 40em
So by the last point, the text is already far above the viewport it seems like it has disappeared.
The solution to this is not to mix px's and em's.
If you change -40px to -4em on the last keyframe, the animation will work okay, maybe won't be the pixel perfect, but at least it will work.
I'm trying to make a loading spiner with icon from https://materialdesignicons.com/ but the icon doesn't just rotate, it also moves slightly from the center.
I have these styles:
#keyframes spin-animation {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spin:before {
display: block;
transform-origin: center center;
-webkit-backface-visibility: hidden;
-webkit-animation: spin-animation 2s linear infinite;
animation: spin-animation 2s linear infinite;
}
It's <i class="mdi mdi-something spin"> element. So it has added :before with content of the icon.
This element sits in an absolutely positioned wrapper, with display: flex, horizontally and vertically centered.
The problem is that when the icon rotates, it doesn't rotate around its center. The axis moves by a little. The icon doesn't stay in one centered position, instead it moves slightly.
I've tried:
Giving width and height to the i element
Giving width and height to the :before element
Moving the spiner animation from i to :before
Different styles which I've found on stackoverflow, e.g. transform-origin: center center;
The icon itself has the same x and y dimensions so it shouldn't be a problem. The dimensions change when it rotates, but I guess that's correct?
Have a look at Gabriele Petrioli answer in this thread: https://stackoverflow.com/a/14859567/1374439 on how to implement spin with CSS3.
Based on his suggestion the below worked perfectly for me.
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
It is now 2021, use mdi-spin
Example:
mdi mdi-loading mdi-spin
So in this simple example lets say you have an element that on hover has an animation that moves it to the right. Then when the mouse moves instead of jumping straight back to the original position it transitions back to that state.
#test{
position:absolute;
left:0;
transition:left 3s linear;
}
#test:hover{
animation:move 4s linear;
}
#keyframes move{
0%{
left:0;
}
100%{
left:300px;
}
}
<div id="test">Hover</div>
The result doesn't work in any either Edge or Chrome. Firefox works but only on the first animation. Any subsequent animations won't work until you refresh the page. So is this possible? And why does Firefox work once then stop?
So I am clearer this is an simple example. Sure this can be done with just transitions, but transitions are limited and not always possible. Also if you will notice a return animation isn't possible since it could be from an arbitrary point.
Rather than using the animation and transition properties, you can accomplish this using just the transition property.
#test{
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover{
left: 300px;
transition: left 4s linear;
}
The issue you're having is that the animation must complete in order to transition into a different state. Furthermore, when you mouse out another animation needs to be added to the non-hover selector which animates from 300px back to 0px. To fix this, just use the transition property within the hover and non-hover selectors. However, this is really only a 2 state solution. If you want more granular control of the animation then you'll probably want to create two separate animations one for forward and one backwards.
Just use the transition on the non-hover selector. No need for animation here.
#test {
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover {
left: 300px;
}
<div id="test">Hover</div>
When using CSS bounce key-frames i have set the top of the bounce to 870px, but if I re-size the window the object can bounce past the border of the window, is there any way to change the bounds with the screen size.
#-webkit-keyframes bounce{
from, to{
top: 0;
-webkit-animation-timing-function: ease-in;
}
50%{
top: 870px; /*value in question*/
-webkit-animation-timing-function: ease-out;
}
}
Using view-port units allowed the animation to scale to the screen size. credit to #Manoj Kumar for introducing me to them.
I have a web page that contains five divs. A user can switch between the divs by clicking a next or previous button. If next is clicked, I fade-in the next div on top of the existing one and fade-out the existing div. Imagine something like flipping through some pictures.
My problem is, I am only animating the opacity property. Because of this, the users cannot interact with some of the elements of the visible div. My hunch is that its because there is an invisible div on top of it.
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
#keyframes fadeOut { from { opacity:1; } to { opacity:0; }}
.fade-in {
opacity: 0;
position: relative;
top: 0;
left:1rem;
animation: fadeIn 0.3s ease-in;
animation-fill-mode: forwards;
}
.fade-out {
opacity: 1;
position: relative;
top:0px;
left:1rem;
animation: fadeOut 0.3s ease-in;
animation-fill-mode: forwards;
}
Is there a way using CSS, that I could change the display property from inline to none when the fade-out animation has completed? I know I could wire up some jQuery. However, that seems kind of clumsy. It seems like there should be a way for me to change an element from visible to hidden after the 0.3s have elapsed.
Any help is appreciated.
Yes, opacity will keep the invisible overlaying elements on-top.
Animate opacity, but at the same time toggle visibility from/to hidden/visible allowing interaction with underlying elements once an element is visibility:hidden
Also, instead of relative since you want a fade-trough effect, absolute should best fit your requirements.