Most voted "css-animations" questions
46 questions
Sort by count of
-
17
votes1
answer3079
viewsHow does Cubic-Bezier work in CSS Animations?
When we make an animation with CSS we have several parameters that we can use. Ex: animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s…
-
11
votes3
answers572
viewsIs it possible to animate text-Decoration with CSS?
I recently saw this animation made with SVG, But I was wondering, is it possible to animate the text-decoration-style: wavy in the :hover in order to achieve the same result? body { font-family:…
-
9
votes2
answers687
viewsHow to make an Animation in CSS with drag effect. Place Blur in motion
I’m willing to put one loader animated in CSS with @keyframes on a page, but I would like to put a "drag effect" on it as if it gave a "blur" with a trace of Blur following the element when it…
-
5
votes1
answer1523
viewsEffect of skirting a div’s edge, as if drawing "by hand"
I want to make an edge effect, that in the Hover of a square div, the edge is "drawn", comes out of the top left of the div, fills up to the top right, goes down doing the right side, returns to the…
-
5
votes2
answers2147
viewsZoom effect with CSS
I have a div with an image in which I applied a zoom effect and a slight rotation! but this image must zoom and rotate within the limits of the DIV without overflowing but hide the parts that exceed…
-
5
votes1
answer76
viewsIs there any way to test a CSS animation by Devtools?
I have this simple animation done in CSS, but I’m having difficulties to "debug" your behavior. Every time I have to go in the code, save, and update in the browser. Is there any way to test a…
-
5
votes1
answer279
viewsRadar effect with CSS
I’m trying to make an animation like "radar" around an image using only CSS with @keyframes. I even managed to reach a result, except for the fact that I can not synchronize the two "waves" of the…
-
3
votes2
answers998
viewsAnimation when changing the display into HTML
Hello my dear programmers friends of this our Brazil! I need your help on the following question: I have a button that when pressed changes the display from a div to block. So: CSS #form-pergunta {…
-
3
votes2
answers151
viewsAnimation with image in CSS
I’m breaking my head with a simple thing, usually I solve these problems by looking at google, but today I did not have this luck. And the following, I want to create a background with the class…
-
3
votes1
answer195
viewsReturn element to initial position in Hover css
I am making an animation in a logo, where each letter goes to one side and when I pass the mouse in the div where it is, all the letters must return to the initial value, thus forming the logo. So…
-
2
votes1
answer169
viewsanimation wave effect in SVG string
I am making an animation SVG and to be complete, is only missing the animation of the string .wrapper { background: #364254; width: 100%; height: 100%; } <div class="wrapper"> <svg…
-
2
votes1
answer26
viewsSynchronize the animation of the elements when inserting into the DOM
It is possible to insert an animated element in the DOM synchronized? i.e., when inserting the current state is maintained and not reset as in the example below... function add() { let ctn =…
-
2
votes1
answer1671
viewsHow to change the image displayed in the Desktop and Mobile versions of a website
I needed the desktop version of a website to display an image and the mobile version another image. Since on the desktop the counter would be on top of the image (as it already is) and in mobile…
-
2
votes0
answers115
viewsWhy use translateZ or translate3D in animations made with CSS? Hardware-accelerated animations in CSS?
Nowadays it is quite common to see even in the most simple animation effects websites made with CSS, both with transition as to @keyframes And one thing that has struck me is that several of these…
-
1
votes1
answer118
viewsEnvironment / Technology for developing 3D Web applications
Nowadays, many web applications use 3D resources in their applications. A place where I found some examples was in Chrome Experiments. An example that prompted my curiosity was this applying. My…
-
1
votes1
answer207
viewsTop element animation - ngShow/ngHide
I wonder if anyone knows a method to animate the top element when using Angularjs ngShow/ngHide directives. Explaining better: I have an encapsulating element, and within it two elements, one below…
-
1
votes1
answer6791
viewsImage animation with Pulse effect and css brightness
It is only possible with css to make an image pulsate and pass a glowing effect?
-
1
votes1
answer73
viewsbackground-image Animation with CSS
blz? I have a "" with Parallax (parallaxie. js) and background image animation with CSS (Keyframes). Follow the link: https://codepen.Io/Aguinaldo-Aranda/Pen/zLJwrM It turns out that the animation…
-
1
votes1
answer110
viewsMobile flip card version
Good afternoon, I created a version of a Section to appear only in the small screen version, a flip card, but when opened in mobile, the animation does not appear, and becomes static. Someone could…
-
1
votes1
answer321
viewsMaintain final effect of Animation css
I’m doing a loading screen and at the end of the effect, the css value that should be maintained, is the value that is in 100% of the Animation, only when the effect ends, it goes back to the…
-
1
votes0
answers209
viewsSpinner Horizontal with CSS
I’m trying to create a spinner horizontal from a simple image only with CSS (not counting the JS trigger, of course). But so far I have not succeeded. The effect I would like would be as well as the…
-
1
votes1
answer756
viewsChange radio input checked by Jquery
I have one more question here on the forum rs. I created a css framework, made a slider with input radio + label but had not put animation (change from second to second between them). But only q now…
-
1
votes1
answer40
viewsAnimation bug in Firefox
I created a svg and made a little loading animation, in the style of a simple Download... This animation works perfectly in Chrome, but in Firefox and Edge there are some problems with the…
-
1
votes1
answer792
viewsBanner animated with HTML5
Good afternoon Folks, I received a request to create an animated banner in HTML5. I created the banner using HTML and CSS, and it worked correctly. The client was trying to implement on his site,…
-
1
votes1
answer519
viewsCSS Effect: Floating label in Form does not work without required attribute
I’m using the floating effect on a form to move the label when the user clicks input or select. The problem is that the resource only works if the attribute required is present. This is a problem…
-
1
votes0
answers33
viewsProblem with Keyframe within @media on wordpress
Good morning I’m finding the following difficulty in editing a mobile code in wordpress css, I made an animation with the keyframe on the desktop with the code below, but it’s time to put this same…
-
1
votes1
answer203
viewsHow to create an infinite slide similar to Instagram?
I’m trying to create an infinite slide similar to the one on the main instagram page, using only CSS3 and the BOOTSTRAP. I’m having the following difficulties: Create the right effect Images should…
-
1
votes2
answers76
viewsGradient Animation CSS
I’m trying to make an animation like this link: https://codepen.io/TheCodeDepository/pen/jKBaoN It turns out, the code below (which I copied line by line) is with some problem that does not allow…
-
1
votes0
answers14
viewsAren’t you supposed to be moving?
My goal would be to make it look like "waves" inside H2. I’ve tried everything but I can’t, I tried to make a @keyframes: @keyframes animate { clip-path: polygon(0 47%, 19% 48%, 34% 56%, 55% 61%,…
-
1
votes1
answer37
viewsMake an element grab the entire screen using Hover
I was making a layout in fig, and I’m passing it to html and css, but I wanted to make an animation. As you can see I have a pink triangle, and I wanted to pass the mouse over it, it zoom in and…
-
0
votes1
answer80
viewsAnimation with Problem in Safari
A while ago I realized that in Safari animations work in a different way. For example, if we have a text inside a span and we want the hover the letters of this text diminish 1px, we put…
-
0
votes2
answers317
viewsEnable Animate.css only when object is clicked
How to add the animation effect only when the object is clicked? I’m already using animations with Animate.css, but I’d like the effect to start only when I click above. How to do this?
-
0
votes1
answer22
viewsTyping effect not only responsive with CSS
Good afternoon, you guys, I did, with a help from some colleagues here, a Typing effect on the home, but it is not becoming responsive, is not adapting to the mobiles. I’m also trying to put another…
-
0
votes2
answers123
viewsHow to know percentage of animation in CSS
I searched and did not find a function or property of the Animate attribute (CSS), to track and control the percentage of a CSS animation. That is, I want, dynamically, to know in how many percent…
-
0
votes2
answers24
viewsHow to apply different effects at the same time?
Eae personal, beauty? I have two icons and each one of them has a different Transform effect, my doubt is: When I hover over icon1, there is some way to trigger the icon2 effect at the same time? my…
-
0
votes2
answers320
viewsAnimation in CSS is executed but when it starts again it does not repeat
The animation slide-in begins in the margin-top:0%; width:100%; and ends in the margin-top:300px; width:100%; then what this animation does is to scroll down the text that is written. But right…
-
0
votes1
answer166
viewsevent with javascript scroll
I have the code below creating the fadein and fadeout effect with the Animate.css library in a scroll event, but when the event occurs applying fadeOut, it reappears until it moves the scroll, and…
-
0
votes2
answers36
viewsProblem with running CSS animation
I made an animation in CSS, but it stopped working. Where is the error? HTML/CSS #loading { background-color: #0e5077; height: 100%; width: 100%; position: fixed; z-index: 99; margin-top: 0px; top:…
-
0
votes1
answer98
viewsWhat would be the structure of CSS. How to build this gallery template?
I would like to know what CSS structure needs to be applied to get the increase of divs with a good transition of animation at CSS level of height and width, the internal content of the div does not…
-
0
votes0
answers67
viewsTransform a scss animation to fit the angular animations
Hello, I need to place in my angular animations the following scss animation: 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 100% { opacity: 1;…
-
0
votes1
answer63
viewsI need to make a shape with css and I can’t. And rotation doesn’t work on IE11
Talk guys, is it okay with you? (I hope and wish you) I’m starting a new personal project, and I’m getting my ass kicked with two questions: 1 - The set of menus is rotated, while the central logo…
-
0
votes0
answers14
viewsAnimation in CSS Enable X in X Time
Is there any parameter for my animation to activate x in x time? For example, every 7 seconds I want this animation to activate: <!DOCTYPE html> <html> <head> <style> body {…
-
0
votes1
answer105
viewsInfinite preloader
I applied a preloader to a website but he "won’t hang up" so to speak. $(window).on('load', function () { $('#preloader .inner').fadeOut(); $('#preloader').delay(350).fadeOut('slow');…
-
-1
votes1
answer57
viewsI would like to apply an animation in <Nav>. I would like to make it appear by clicking . menu_burger, from left to right
const menuBtn = document.querySelector('.menu-btn'); let menuOpen = false; menuBtn.addEventListener('click', () =>{ …
-
-1
votes1
answer27
viewsanimation goes out of place when I zoom out
Good morning, I’m a beginner programmer, I was doing a solar system css animation with Divs, the problem is that not all elements fit in the same space when the zoom is normal so when I zoom in,…
-
-1
votes1
answer27
viewsHow to overlay the animation of loading into a div?
all right with you? I am creating a form where by clicking on any of the buttons I would like an animation to load. But when clicking it overlap the div in which the form is inserted. I wonder how I…