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.
Related
Fiddle A:
I have a gallery of images (there are 4 right now) as shown here in this JSFiddle (lets call as Fiddle A)
in which every single image fades out after 3s second and there is transition delay of 800ms.
I have used JS to make the animation work. In JS, I have used the following constants in my JS.
transitionDuration => is the delay (white flash which we see) which happens on moving from one image to another.
transitionDelay => is the presenation time of an image (meaning the time span for which the image stay at their place).
totalDelay => is only for one image.
Fiddle B:
I also have another gallery of images as shown in this JSFiddle (let's call as Fiddle B) in which a CSS animation is going on.
Presentation time of one image in the fiddle is 3 seconds, and then it moves to another images.
Problem Statement:
I am wondering what changes I need to make in Fiddle B so that it looks like Fiddle A. In Fiddle B there is no transitionDuration. Is there a way we can add a transitionDuration (white flash which we can
see on moving from one image to another)?
In Fiddle B, I have used the following CSS:
a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
position: absolute;
animation: 9s infinite ease-in-out cf4FadeInOut;
opacity: 0;
z-index:1;
}
Adjusting opacity in keyframes to achieve transition duration works, which you have implemented.
Remove opacity: 1 and opacity: 0 so that it becomes
.featured-block a { display: inline-block; }
a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
position: absolute;
animation: 3s infinite ease-in-out cf4FadeInOut;
z-index:1;
}
In my UI, there's a place for the user to provide input. It may be difficult for some users to release that the UI is even waiting for their input, and so to draw their attention to it, I have a little hint-arrow.
The arrow comes in from the left and bobs from left to right, pointing at the input location.
After the user has provided input at least once, they don't need the animation, and so I remove the .emphasis class from the parent element, and hence the animation.
.options-block .hint-arrow {
height: 145px;
width: 217px; /* width of image */
background-image: url(highlight-arrow.png);
background-position: center;
position: absolute;
opacity: 1;
transition: transform 2s ease-in-out;
transform: translate(-165px,0);
}
.options-block.emphasis .hint-arrow {
animation: options-emphasis 3s ease-in 0s infinite alternate;
}
#keyframes options-emphasis {
0% {transform: translate(-92px,0);}
100% {transform: translate(-62px,0);}
}
Expected behaviour: When the animation is taken off, the arrow slides from its current position back to its default position via the transition property.
Actual behaviour: The arrow snaps back to its default position.
What am I missing here? How do I make the element slide back instead of snap back?
CSS-only solutions are much preferred, although I do have JS available.
Please note: I am not talking about the animation stopping, I am talking about removing it altogether - animation-fill-mode is not the answer.
add the forwards attribute to your animation options
animation: options-emphasis 3s ease-in 0s infinite alternate forwards;
This prevents it from snapping back to the initial starting point
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
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.
I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle