css-animations

问题 Background: Trying to create an esthetically pleasing linking hover for the future Current JSFiddle: Available here for FF Browser. body { color:#ffffff; font-family:"Helvetica"; font-size:12pt; background-color:#000000; font-weight:bold; } a:link { color:white; text-decoration:none; } a:hover { animation: myhover 1s; transition-timing-function: ease-in-out; font-weight: bold; } @keyframes myhover { from { background-color: black; color: white; } to { background-color: white; color: black; }

问题 This issue just started occurring in the past couple of weeks, so it may be related to an IE11 update or a change with FB's widget. I have a FB share button on my site. <script> (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> is in the document head, as well as

问题 Trying to fix this CSS3 Transition for Mozila firefox , it's working perfectly in Chrome and Opera but not working in Mozila firefox 35.0.1+ . I have also applied -moz-keyframes on CSS. CSS: /****************** * Bounce in Left * *******************/ @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-1000px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform

问题 I have such SVG as below. Right now the circle takes the whole size of SVG. How can I make it look like this: the SVG has a certain size (let's say 215x250) and the circle should be of size 16 in the center of svg. Would be also great to animate this centered circle so it looks like a loading spinner. <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml

问题 I have a fiddle (Fiddle A) in which cross-fade gallery of images happen for 2 images (2 tiles). Here is the snippets of html/css which I have used. <div class="featured-block" style="display:flex; justify-content: center;"> <a href="https://www.google.com/" class="featured-block__item cf"> <div class="featured-block__item-inner"> <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"> <img class="default-opacity" src="https://i

问题 I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here. .headerDropdown { border-radius: 6px; border: 2px solid #d4d4d4; height: 34px; } .headerDropdown select { height: 34px; line-height: 34px; padding-left: 10px; padding-right: 5px; margin-right: 20px; font-size: 16px; border: 0 !important; /*Removes border*/ -webkit-appearance: none; /*Removes default chrome and safari style*

问题 I wish to create a CSS animation that act like "Blink effect" using LESS. My purpose is to call a single mixin passing each time 2 @stop colors in order to get diffent color blink depending by css class of DOM element. Currently I have the following HTML: <p class='blink'> Loading... </p> <p class='blink alert'> <big>WARNING!!!! Operation failed.</big> </p> And here, LESS CODE: .blink { .animation-blink-mixin(@dark-green,@light-green); &.alert { .animation-blink-mixin(@dark-red,@light-red); }

问题 Here is what I am trying to figure out, but without using the 51% keyframe as a hacky way to implement the change of transform-origin . Here is a Fiddle Demo. @keyframes spin { 0% { transform-origin: 50% 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 50% { transform-origin: 50% 0; transform: perspective(800px) rotateX(360deg) translateZ(0px); } 51% { transform-origin: 50% 100%; /* hacky way to instantly change transform-origin */ } 100% { transform-origin: 50% 100%;

问题 I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero The width of the div gets set inline like this: <div class="progress-black" ng-style="{width:progress}"></div> And the onload animation is simple .progress-black { background: black; animation: progress-bar .5s

问题 Answering some question I've tried to show how text input placeholder can be animated on blur using plain CSS without JavaScript / jQuery. I used the :not(:focus) pseudo class together with input-placeholder and put the blinking animation in it. On Chrome, IE and Opera it works perfectly, but on Firefox it fails. If I try to set other property, for example color:red it works, so I'm sure that my code properly access the placeholder on blur. I also tried the same animation on a simple div with