css-animations

问题 How can I have two CSS animations playing at different speeds ? The image should be rotating and growing at the same time. The rotation will cycle every 2 seconds. The growth will cycle every 4 seconds. Example Code: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale

问题 What I'm trying to do is to have on hover transition or animation (can be triggered via javascript with onmouseover or onmouseenter ) that will also be reversible (so the opposite animation should happen on mouse leave) but the opposite animation should have a delay it should be able to reverse in the middle of animation without delay It's hard to describe without showing so please check this codepen that is pretty close to what I'm trying to achieve: http://codepen.io/anon/pen/xROOqO There

问题 what is wrong with my css,the bounce animation just doesn`t happen??? I want an image to bounce on click according to my css animation which is not happening HTML CODE:: <div class="hair"> <img src="images/single.png" id="hair1" class="hair_animate" width="13" height="40" onclick="bounce();" > </div> Css Code: .hair{ position: absolute; top: 500px; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-60px);} 60% {-webkit

问题 Related to this question: Android Holo loading spinner in CSS I have noticed that the accepted answer's first example, the one with images, doesn't work on chrome (i just see a static grey ring) while it works on Firefox and IE 11. Even though the purpose of the question was to make a spinner without images and both are very nice I find the first one slightly better looking (on firefox, that is) and i'd like to use it but I don't know why it doesn't work on chrome and I want to know if there

问题 I am having an issue getting keyframe animations to work on either desktop or mobile safari. My Code. @keyframes bounce { 0% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.25, .85) translateY(27px); } 100% { transform: scale(1, 1) translateY(0); } } @-webkit-keyframes bounce { 0% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.25, .85) translateY(27px); } 100% { transform: scale(1, 1) translateY(0); } } .my-animation { animation: bounce 2s infinite;

问题 I use an image and three spans as siblings within a wrapper ( .avatar ), to display a small avatar. I added two animations. The animated elements are the spans. They are animated with a small delay. One animation is executed immediately ( @keyframes rings-load ). The other one ( @keyframes rings-hover ) executes, when .avatar is hovered. Problem: After hovering .avatar , leaving the element, the initial animation is triggered a second time. Why is that? What would be considered best practice

问题 i'm trying to make my div moves up and down with CSS3, but it doesn't <div class="globo"></div> @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @-moz-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @-o-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } @keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%; } } .globo{ float: left; height: 300px; width: 270px; background: url('https://lh3.ggpht.com/-hCYXxhc

问题 So I have a background-image behind various texts. In CSS it's set to background-size: 1000px; I'd like it to resize(enlarge) when I widen the viewport window to @media only screen /* Tablet */ and (min-width: 768px) whilst still remaining within the confines of its container (keeping the height and crop is important. I just want to grow the picture to fill the left and right dead space.) I've tried the obvious background-size: 2000px; however, the background-image is sticking to its original

问题 I have the following HTML and CSS which you can also find in the JSfiddle here: /* Header & Naviagtion */ .header { width: 100%; height: 10%; position: fixed; } .navigation { width: 100%; height: 100%; } .navigation>ul { height: 100%; width: 100%; display: flex; list-style: none; margin: 0; padding: 0; background-color: purple; } .panel { transform: scale(1, 0); transform-origin: top; transition-duration: 0.2s; width: 100%; position: absolute; top: 100%; background-color: lime; } .button

问题 I have a bootstrap striped table ( .table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;} ), and I'm drawing the user's attention to the updated row using this little bit of CSS: .attention { animation: 3s attention; } @keyframes attention { 0% { background-color: #bcf516; } 100% { background-color: initial; } } ... and adding class="attention" dynamically to the <tr> of which ever row that was updated. So a table with row #3 updated will look something like this: <table