This might not be possible using CSS-only, but here goes:
Given this bit of CSS:
.animated {
animation:enter-animation 0.5s ease-in-out 3s;
}
#media (max-width:450px) {
.animated {
animation:none;
}
}
This triggers an animation on elements with .animated class which is visible after the 3s delay specified above.
If the screen is 450px or lower, the animation is cancelled.
The behavior I want to change is this: animation triggers (browser window is large enough), then browser window is shrinked below 450px, then enlarged over 450px which triggers the animation to run.
I would like to know if there is a CSS-only solution to prevent the animation from running when the browser window grows from under 450px to over that.
Related
Bit of background: ArtStation's pro subscription gives 3D Artists their own website and allows manual customization of the default themes by injecting CSS rules.
I've (successfully) redesigned my website with CSS in 2 days but I have a problem on the homepage.
Please see the homepage at https://viggopaulman.artstation.com.
It has an image slider with an opacity transition between images. The ArtStation menu settings give me an option to set switching time of images: Screenshot 1. Current switch time is set to 3 seconds from this menu.
I have added a zoom-out keyframe animation effect to these slides:
/* Sliders Transition and Zoom Override */
.slide {
transition: opacity 5s;
}
.showing {
animation-fill-mode: forwards;
animation: slide 3s linear 1;
}
#keyframes slide {
0% {
transform: scale(1.125,1.125);
}
100% {
transform: scale(1,1);
}
My problem is the slides zoom out, stop and wait for the next one to transition in. (There is a very short "snap" at the last frames too if you look carefully.) I'd like to make the transition to the next image start before the zoom reaches 100%. Or to force the image to keep zooming in while the next image transitions in and replaces it. I'm basically trying to achieve an optical effect where the slides are in a constant cinematic zoom-out motion without abrupt stops or breaks in the flow.
From what I understand I have to tweak the 3 second menu switch, the animation: slide 3s and the transition: opacity 5s?
Is there a way to achieve this? Thank you.
In chrome my text appears blurry, I've tracked the issue down to my animation in my css file but I have no idea why it is causing this.
(make sure you open the image otherwise you don't see a lot of difference)
Enabled animation (blurry)
Disabling the animation (crisp)
I have tried a lot of options that I found on stack overflow but none solve my issue...
Chrome Font appears Blurry
CSS transition effect makes image blurry / moves image 1px, in Chrome?
WebKit: Blurry text with css scale + translate3d
Blurry text on Chrome when using CSS -webkit-transform
Chrome animation makes text blurry
Animation itself
#keyframes blink {
0% {
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
animation: blink 2s infinite;
Example of animation
i've solved the issue and it was because my wrapper component had position: relative; which somehow caused the rest to be blurry when the transform was applied.
Look for a parent that has the position:relative;
This is a chrome only question. I'm using chrome 56 on OSX, but I also tested this on Windows 8 using chrome 57.
I have an animation that is gpu accelerated, using will-change: transform and a keyframe animation using transform: translateY(...) to move an element around the screen.
.block {
height: 20vh;
width: 20vh;
background-color: black;
animation: move 5s linear infinite;
will-change: transform;
}
#keyframes move {
0% { transform: translateY(0%); }
50% { transform: translateY(400%); }
100% { transform: translateY(0%); }
}
Example on codepen: http://codepen.io/nicokoenig/full/PmYaOZ/
The animation itself is handled on the chromes compositor thread and is therefor not affected if the main thread is blocked.
When I record a timeline, I still see that there is a style calculation for each frame.
Why does chrome need to recalculate styles, even if the animation is handled on the compositor thread?
UPDATE
I reviewed my code and added three types of animations.
the first animtion is using a fixed viewport unit (vh) to translate the box.
the second animation is using a fixed pixel value to translate the box.
the third animation is using a percentage value to translate the box.
I also added button to block the main thread - if I hit the button:
the first and second animation will still move around the screen, the third one freezes.
I think that is the answer - an animatoin using translate with percentage values needs to recalculate styles during the whole animation.
The behavior is a known chrome bug.
https://bugs.chromium.org/p/chromium/issues/detail?id=711645
https://bugs.chromium.org/p/chromium/issues/detail?id=389359
I am trying to delay a CSS transition, but it seems not to be working. Here is what I want to happen:
Start the video
Move the mouse pointer out of the video
The control bar shrinks, but the play-progress gets larger.
Move mouse pointer back in video, the control bar returns to normal.
As you can see in the CodePen pen, the play-progress bar gets larger before I want it to: http://codepen.io/mboles/pen/mJeJOO
Here is the CSS I am currently using:
#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-progress-control {
-webkit-transform: translateY(-25px);
}
#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-play-progress {
-transition-delay: height 3s;
height: 10px;
}
I have tried to change the order of the transition delay and height, but that did not solve the issue.
Many thanks-
Matt
It turns out with transition-delay you cannot put the property with the delay, it must be explicitly stated using transition-property. So the solution is:
#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-play-progress {
height: 10px;
transition-property: height;
-transition-delay: 3s;
-webkit-transition-delay: 3s;
}
I have a very odd problem that I only observe with Safari, on a touchpad.
When scrolling down, my navbar fades in / down via CSS transition. If I happen to scroll back up, thus removing the class responsible for the transition, the navbar gets stuck visually in the wrong place, only on safari. The CSS / styles say the correct values, and even the hover/click handlers are in the right place.
That is, In the image below, my mouse is hovering at the blank white area, while the navbar stuck below gets highlighted.
There are several odd things about this:
The element is the navbar via global styles, yet only happens on this particular page.
I can't seem to trigger the problem via scrolling with the mouse.
I can only trigger it via very subtle trackpad movements, or fast trackpad movements.
Any suggestions on how to fix this?
Relevant CSS
.is-sticky-slide-down {
#include experimental(animation, fadeInDown .3s ease-out 0s);
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
The problem was due to enabling -webkit-backface-visibility: hidden on elements. Removing this "fix" for hover glitches (like twitching opacity fades) fixed the other glitches on Safari.
To be clear, the fix is to remove -webkit-backface-visibility from affected elements.