css-animations | 易学教程

Activate css animation/translation with javascript

阅读更多关于 Activate css animation/translation with javascript

问题 I am trying to get off javascript animations and use CSS animations instead. I am currently using jQuery's animation functionality. I came across this website with a bunch of wonderful css animations. Such as: .demo1 { -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .demo1:hover { -webkit-transform:translate(0px,10px); -moz-transform:translate(0px,-10px); -ms-transform

CSS animation performance

阅读更多关于 CSS animation performance

问题 I have a small hobby project in which I try to build a matrix rain: . See demo here. Or this JSFiddle My question is: how can I make this more efficient, as I can see it gets slow when I add a lot of columns. I have implemented it as rendering a lot of absolute positioned div s that are animated. Here is my CSS: div { position:absolute; width:1em; display:inline-block; color: black; animation-name: example; animation-duration: 2s; text-shadow: none; } @keyframes example { 0% {color: white;

Samsung S6 Webview css animations issue

阅读更多关于 Samsung S6 Webview css animations issue

I'm working on application written in cordova/phonegap. Now i have some strange issue - in Samsung s6 css animation does not work properly. For example - i have a spinner animated with css. Every time when launching application spinner doesn't want to hide. I also hide some element using css animation. And after launching application this element doesn't slide. What's strange these bugs occurs only on first application launching, every second time when css animation is applied it works. Also simple touching the screen makes animation starting to work. Version of Android is 5.1.1, webview is

css3 animation change continuously

阅读更多关于 css3 animation change continuously

问题 i am trying to implement css3 animations.... i am planning to change my aimations affects continuously in cycle but the problem is after one cycle it stops in red color it does not change its color further.... how to continue the cycle... http://jsfiddle.net/9CZFS/ providing my code below div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ }

using zepto, is it possible to queue animations?

阅读更多关于 using zepto, is it possible to queue animations?

问题 zepto.js has an API to animate elements, which allows to include a "done" callback function. animate source however jquery type queue API doesn't seem to be supported. I was wondering if there's a built-in approach for creating animation sequences with zepto or should i just pinch a queue function from somewhere? also the "done" callback doesn't pass any parameters, so its bit ugly to know which stage of the anim sequence you are at - maybe theres a workaround for that? 回答1: I'm not sure if

CSS text-align delay with width animation

阅读更多关于 CSS text-align delay with width animation

问题 I am trying to animate my text to appear from left to right on page load. This is done by simply setting @keyframes to transition from 0% max-width to 100%. However my text-align settings seem to be applied only after the animation is complete. I just want the text content itself to reveal itself where I intend it to be, and assumed my code is correct. Am I missing something obvious here? I'm fairly new to CSS , but my research doesn't seem to indicate there are inherit properties of

Setting animation-delay in Safari overwrites animation property, but not in Chrome

阅读更多关于 Setting animation-delay in Safari overwrites animation property, but not in Chrome

问题 Note, I am using the latest Safari (9.0.2) and the latest Chrome. I know that as of 9.0.x safari handles a lot more of the animation prefixes for you. Yay! Also, I've submitted a bug report. At it's most simplest, I'm trying to set the animation-delay only using JavaScript for a CSS Keyframe animation. The code is as follows: el.style.setProperty("-webkit-animation-delay", "5s", "important"); Now in Chrome, this updates the animation-delay property as I expect only . The animation property is

Activate CSS3 keyframe animation when the content scrolls into view

阅读更多关于 Activate CSS3 keyframe animation when the content scrolls into view

问题 I have been trying to figure out how to have animations occur when it is scrolled into view but with little to no luck. I found a JQuery plugin "Waypoints" but I lack the skills to utilize it. I am trying to use CSS3 keyframes that animate when they are scrolled into view. I made a breakthrough and am close to what I want to accomplish but it isn't quite where I want it. I have a class named "bounceinright" that makes the item bounce in to the right of the screen. Here is the CSS for that: @

Workaround for svg animation bug(s) in Chrome: backface-visibility and transform-origin sometimes without effect

阅读更多关于 Workaround for svg animation bug(s) in Chrome: backface-visibility and transform-origin sometimes without effect

问题 I want to make an svg picture file containing some “card flip”-style animations, using css with a stylesheet embedded in the svg file. In Chrome, at least two problems may come up, depending on the exact code used: either the front side of the card remains on visible even when flipped, obscuring the backside, or the back side of the card is wrongly positioned. Here is a simplified version of what I'm trying to achieve: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http

How keep the image rotated during the reverse movement?

阅读更多关于 How keep the image rotated during the reverse movement?

问题 I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images. I was trying to give animation to the first image in the following way: in 0% it starts at the beginning of the div (the fish's head is on the right) in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion) But it just rotates in 100% and no more.