css-animations

问题 I just want to animate my image through curved path. Like this way. ( I'm using position absolute for positioning. ) Did some research and found that css transform can do the job. It can be easily done by straight line. But curved path? I tried to combine with css transform-origin + transform:rotate but I didn't get exact that I want. Clearly I want to move around 80% to the left curved and need to come to original position. I tried so many times adjusting my code but still no luck. Fiddle P

问题 I have a rainbow bar that sits at the top of my page: .rainbow-bar { /* Epic rainbow bar */ height:8px; background: black; /* fallback */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-size: 200% 200%; animation: moveright 3s ease infinite; animation-direction: alternate; } So I want the bar to loop forever, moving to the right. I'm bad at explaining so heres an image This is the current animation code I have which of course just makes it

问题 I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div . Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out. See example here: https://jsbin.com/dinehoqaro/edit?html,css,output You can see that the expansion is starting from the top left. .circle { background-color: white; border: 1px solid red; border-radius: 50%; width: 50px; height: 50px;

问题 In Internet Explorer this animation appears to wobble. I was reading the answer to this question and they made it sound as though it is possible to fix. I cannot really use an image as the border radius is not constant, and I would prefer not to use an animated gif. I understand 'wobble' is not a very good description but I can't think of any other words to describe it. I have not tested it with Opera/Safari, so if you have either of them I would like to know if they display correctly or also

问题 I'm trying to make marquee in css that will slow down on hovering over the element. I have done something like this but it doesn't stop the main animation and when the mouse exits the marquee it goes back to it's position as if I didn't do anything. Here's the code in CSS and HTML .prices { background-color: #f5fafd; font-size: 14px; padding: 6px 0; border-bottom: solid 1px #d9d9d9; margin-left: 0; margin-right: 0; } .currency { text-align: center; color: #444444; font-weight: 300; } .marquee

问题 The problem is that the transform property's value has multiple part like translate , scale etc. This is a theoretical question about element, let's .loader that has transform:translate(10px, 10px) and in the animation I want to animate the scale property. In this case, the browser will not take the transform:translate(10px, 10px) and will take only the scale . I am looking for a way around this problem. Here is an example to this question. Please, keep attention that I'm not looking for an

问题 I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? 回答1: To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS

问题 I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? 回答1: To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS

问题 p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } For the animation CSS code above, I'm wondering whether there's any way to pass the values of margin-left and width as parameter from Javascript. 回答1: Use CSS variables and you can easily do this: document.querySelector('.p2').style.setProperty('--m','100%'); document.querySelector('.p2').style.setProperty('--w','300%'); .p1,.p2 {

问题 This question already has answers here : Maintaining the final state at end of a CSS3 animation (4 answers) Closed 4 years ago . Given the following CSS3 animation.... <style type="text/css" media="screen"> .drop_box { -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } @-webkit-keyframes drop { from { -webkit-transform: translateY(0px); } to { -webkit-transform: translateY(100px); } } </style> <div class="drop_box"> Hello world </div> The