css-animations

问题 I am working on this demo. How can I add five seconds delay to this animation between each rotate? .card { background: #00f; width: 100px; height: 100px; animation: rotate 4s infinite; -webkit-animation: rotate 4s infinite; } @-webkit-keyframes rotate { 100% { transform: rotate(90deg); } } @keyframes rotate { 50% { transform: rotate(-90deg); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card">A</div> 回答1: You can set the overall

问题 I am trying to do some growing line animation with SVG and CSS animation. Since the lines have different length respectively, I use pathLength to assign a virtual length for them. Thus i can use only one @keyframe for all of them. Here is the sample code <svg width="1000px" height="100px"> <g stroke="#FAB" stroke-width="3"> <line id="Line1" x1="20", y1="20", x2="520", y2="20" pathLength="1000"/> <line id="Line2" x1="20", y1="50", x2="780", y2="50" pathLength="1000"/> </g> </svg> <style> line

问题 I am trying to get the typing animation effect to continue one line at a time when the size of parent container forces the text to span multiple lines. /* The typing effect */ @keyframes typing { from { width: 0; } to { width: 100%; } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: green; } } .animated-text { font: bold 1.45em monospace; color: black; border-right: 0.6em solid; overflow: hidden; /* Ensures the content

问题 I have a transition animation I want to trigger on the width of an SVG element inside a group element. The animation only seems to work on the Chrome browser. <!-- works --> <svg width="400" height="100"> <rect id="rect-1" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> <!-- only works in Chrome --> <svg width="400" height="400"> <defs> <g id="my-rect"> <rect id="rect-2" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0

问题 This question is about speed of CSS animation. .div1{ margin: 10px; width: 300px; background: #A1BDAF; white-space: nowrap; overflow: hidden; } .content{ color: white; min-width: 100%; display: inline-block; animation: moving 4s ease-in-out forwards; transition: width linear; } @keyframes moving{ from{ -webkit-transform: translateX(0); transform: translateX(0); margin-left: 0; } to{ -webkit-transform: translateX(-100%); transform: translateX(-100%); margin-left: 100%; } } <div class = "div1">

问题 I have a defined CSS class spin that creates a simple CSS animation spinner on an element @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin .8s linear .15s infinite; } The spin class is added and removed via JavaScript, however when the class is removed the animation abruptly cuts and the first frame is displayed. Is there are way to have the browser continue to animate the element until it reaches the last frame? I tired doing

问题 I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a fiddle: http://jsfiddle.net/Garavani/yrnjaf69/2/ <div class= "category_item"> <div class= "cat_button"> <span class="title_cat">TEXT</span> </div> </div> CSS: .category_item { position: absolute; background-color: #999; top: 100px; left: 50px; width: 200px; height: 200px; /* seems to be overwriten by animation keyframes */ -webkit-transition: -webkit-transform 0.215s ease-in-out; transition:

问题 I am making a background-image fading animation using CSS and it works as expected the first time it runs through the loop, but the second time it gets stuck on the last image throughout the duration, briefly jumps to the third image, then back to the last one. How can I update it so it runs smoothly through the animation during each of the infinite loops? #rotate { width: 100%; height: 100%; position: absolute; bottom: 0; right: 0; margin: 0; padding: 0; } #rotate li { animation: func 16s

问题 I would like to create a raining-effect for my weather app with CSS-only. However, even though I achieved satisfying results with the look, I can't seem to make them cover the entire screen continuously and not just random chunks of it - how would I go about this? body { overflow: hidden; } #background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #background.night { background: linear-gradient(#0F2129, #47334A); } #background>.cloud { width: 900px; height: 900px; position:

问题 I would like to create a raining-effect for my weather app with CSS-only. However, even though I achieved satisfying results with the look, I can't seem to make them cover the entire screen continuously and not just random chunks of it - how would I go about this? body { overflow: hidden; } #background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #background.night { background: linear-gradient(#0F2129, #47334A); } #background>.cloud { width: 900px; height: 900px; position: