Without a screen recorder, Is it possible to directly export, render, or save HTML CSS animations to a video file? I'm also aware SVG within a html document could also be a part of such a process. ...

Is it possible to have a CSS slider cycle through two images when animating them with the translateX transform property? I'm facing a couple of issues: I can't seem to get the second image to show...

Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that...

If have the following keyframe rule: @keyframes bounceIn { 0% {transform:translateX(0);} 60% {transform:translateX(18rem);} 100% (transform:translateX(15rem);} } And then add it to an elemen...

I am trying to move an HTML element up about 10px whenever a user hovers their mouse over it. I did some research on w3schools, but I could not find any information that helped me. Most of their an...

I want to show more text on a button when it's hovered and I want the button to shrink and grow with the extended text. I need a general solution since the text on the button and thereby its width...

(Note: This was asked [exactly] 1½ years ago and had [exactly] zero activity... I'm apparently having the same issue so hopefully OP @Jaffa won't mind me piggybacking in it, and slapping a bounty o...

So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript. Today i wanted to create something like this: ...

I have build a pulse animation in CSS3I would like to implement in to marker in google maps api unfortunately it is not possible direct insert in to the map. Is there any option to the CSS3 animati...

I am trying to show a CSS3 animation as a loader-animation when I navigate to one of my subpages. I am using keyframe animation on rotateY. The issue is that on Firefox, while navigation to another...

tl;dr: I would like to create an actual 3d sphere with CSS - not just an illusion Note: some of the snippet examples are not responsive. Please use full screen. With pure CSS you can create and an...

I have an SVG circle animation for a progress bar where the stroke-dashoffset is animated from 0,radius to radius,0 (for 0% to 100%). The equation for the length of the circumference of a circle ...

I'm trying to implement a CSS typing indicator in Vue. Without Vue, it looks like this: .typing-indicator { background-color: #E6E7ED; width: auto; border-radius: 50px; padding: 20px; ...

I've seen many websites that have a black and white image that transitions to a colored version with a :hover selector. What I'm trying to do is the same but with no user interaction. For example, ...

I have the following shimmer effect working very well when used on a p element but it doesn't work on any div nor an img. So, what modifications should I make to make sure the shimmer effect plays ...

I have a css animation, which it either repeat infinite or only a certain times. but I would like to play it like 2 times every 5 seconds. Here is my code: #countText{ -webkit-animation-name: co...

The code makes it so the background image of the site transitions between 5 different images but everytime a animation is done and the next animation starts there's a white flash. How do I get rid ...

I have a simple loading screen where I would like to have one dot appear at a time at the end of the text. Unfortunately I can only get them to blink, when I would like for one to appear at a time ...

I found possible issue(or may be it is feature =)) in chrome 75 version. Changes of transform origin during of transform animation doesn't affect on animation. I attached snipet which contains two ...

I'm attempting a very simple rotation of an svg rect element. I want this element to rotate relative to its center and I'm trying to achieve this using the transform-origin property (see snip...

I'm animating text with CSS where elements appear one after the other. Try it out first to see what I mean: .wrapper { pointer-events: none; /* remove pointer events from elements before they ...

I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other thing...

I'm having trouble creating a flyout menu with a specific effect. The flyout goes from display:none to block and then I use jquery to animate opacity from 0 to 1 (and vice versa). This is necessary...

I've been playing around with CSS counters lately and I wondered if it was possible to put them in a CSS animation loop and increment them. My code is fairly simple: div { animation-name: a...

I have a modal which is a white container on top of a semi-transparent dark backdrop. When this modal is triggered I want the backdrop to fade in, and after that I want the white container to slide...