css-animations

问题 I'm here trying to display a list item on hovering an anchor tag. How to affect other elements when a div is hovered - tried using this post but I couldn't succeed. I'm here trying this with only pure CSS. Here's the FIDDLE. And below is the code. HTML : <div class="container"> <div class="menu"> <a class="user" href="#">Brett</a> <ul> <li> <a href="#">Settings</a> </li> <li> <a href="#">Logout</a> </li> </ul> </div> </div> CSS : body { font-size: 50px; } .container { margin-top: 100px;

问题 I have the following HTML and CSS code: .parent{ height: 10%; width: 100%; float: left; position: relative; } .content1{ height: 100%; width: 20%; background-color: blue; float: left; position: absolute; } .content2{ height: 100%; width: 20%; background-color: red; float: left; animation-delay: 1s; position: absolute; } .content3{ height: 100%; width: 20%; background-color:yellow; float: left; animation-delay: 2s; position: absolute; } .content4{ height: 100%; width: 20%; background-color:

问题 I am trying to create a text that would fade into view after a few seconds but I am facing problems. The fade into view is working fine but the text disappears almost immediately after it is shown. Secondly I need this animation to work in a delayed manner but when I set the delay it doesn't seem to make any difference. The delay was working fine earlier. Why does the animation disappear shortly after it is shown? What should I do to get it displayed correctly? Why is the delay not working

问题 How can I make the animation smooth in firefox? span{ background : url(http://www.clker.com/cliparts/F/g/8/N/k/X/black-question-mark-square-icon-md.png) no-repeat; background-size: 100%; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -ms-transition: all ease 1s; -o-transition: all ease 1s; transition: all ease 1s; height: 98px; position: absolute; width: 98px; left: 100px; top:100px; -webkit-animation: spanAnimate 4s linear infinite alternate; -moz-animation: spanAnimate 4s

问题 Any ideas why this animation doesn't work? <style> #movetxt {animation: moving 5s infinite;} @keyframes moving { from {top: 0px;} to {top: 200px;} } </style> <div id="movetxt">move from top to bottom</div> http://jsfiddle.net/vdb3ofmL/1/ 回答1: You should position the base element which is being animated for the top to bottom animation to work. #movetxt { position: relative; -webkit-animation: moving 5s infinite; animation: moving 5s infinite; } Demo Additional Information: As mentioned in this

问题 How can I start CSS animations with js? the first line (webkitAnimation) works but the other ones don't. anim_logo.style.webkitAnimation="threesixty 3s"; anim_logo.style.mozAnimation="threesixty 3s"; anim_logo.style.oAnimation="threesixty 3s"; anim_logo.style.animation="threesixty 3s"; why? live preview (Click on the Ninja Star) 回答1: You better make a separate class with that animation and simply attach it to your element when needed: anim_logo.setAttribute("class", yourAnimationClass);

问题 I'm working to create an infinite autoplay carousel based on the example here: https://codepen.io/jackoliver/pen/qVbQqW Notice how smooth the codepen example is, it never jumps when the carousel resets from the last to first item. Mine is less smooth - Mine is jumping on reset and I can't figure out why... body { align-items: center; background: #E3E3E3; display: flex; height: 100vh; justify-content: center; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX

问题 I'm trying to animate an element rotating like someone starting a top. At first, the element would rotate counter-clockwise before transitioning to rotating clockwise infinitely. The general CSS I have is here: div { animation: PreRotate 800ms ease-out 0ms 1, Rotate 500ms linear infinite 800ms; } @-keyframes PreRotate { from { transform:rotate(0deg);} to { transform:rotate(-360deg);} } @-keyframes Rotate { from { transform:rotate(0deg);} to { transform:rotate(360deg);} } What I expect would

问题 I'm testing something special and I'm trying to loop inside keyframes to dynamically write percentages into it. I've tested something like that with SASS but it doesn't work. @keyframes test{ @for $i from 0 through 100 { #{$i}% { //do special stuff } $i: $i + 1; } I want it to output : @keyframes test{ 0%{ ... } 1%{ ... } 2%{ ... } 3%{ ... } ... } But I got Error on line number: 23. Invalid CSS after " #{$i}%": expected placeholder name, was " {" I've tested this in LESS and it doesn't work

问题 I have an animation moving the background-position of an image with keyframes, and this works fine. Although, when the user click a button, I would like to pause the animation of the background but with a transition, slowing down then stopping the background-position from moving. I searched for something similar to that but I didn't find anything, so I was wondering if any of you would have an idea how I could do that? Thanks. 回答1: NO. You cannot achieve this with CSS animations while using