Stack Overflow
Stack Overflow

Questions tagged [webkit-animation]

webkit-animation is a css property to specify css animation which is understand by the webkit based web browser.

webkit-animation is a css property to specify css animation which is understand by the webkit based web browser;

Syntax:-

    -webkit-animation: < name > < duration > < timing_function > < delay > < iteration_count > < direction > [ , ...  ] ;

links:

  1. http://css-infos.net/property/-webkit-animation
38 questions
13
votes
3 answers

CSS translation vs changing absolute positioning values

Iv'e been writing a webapp for iPad and other tablets and after a lot of viewport issues as far as proper and efficient positioning and animation is concerned. I recently came up with the idea of using -webkit-transform for all my free floating…
TERMtm
  • 1,903
  • 3
  • 23
  • 29
5
votes
3 answers

Trigger css3 keyframes using jquery

I wrote a keyframe animation: @-webkit-keyframes cubemove { 0% {-webkit-transform: translateZ(-194px) rotateY(0deg);} 20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);} 40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);} 60%…
Matt1510
  • 161
  • 1
  • 1
  • 6
5
votes
1 answer

CSS3 animation fadeOut

I'm trying to dissappear Bootstrap Alert after 3seconds. I made it, but it just dissapears and keeps the height of div. Can I remove that div with CSS only? I tried display:none; and it also didn't work. I need help. This is what I…
Alpan Karaca
  • 968
  • 5
  • 12
  • 30
4
votes
1 answer

HTML/CSS - links not working

I have a rotating carousel done using webkit animation and CSS. There are 3 items under the carousel and each item has a photo and a blurb of text. I'm trying to link the text to 3 different links. Right now all 3 text boxes are linked to the same…
user3264603
  • 31
  • 1
  • 1
  • 6
3
votes
2 answers

How to delay before window.close() with addEventListener(webkitTransitionEnd)?

I am not very well-versed in JS and could not understand how to apply similar answers to my question, so I would appreciate your help and advice. What I'm Making: I am working on a webview pop-up. It has a close button at the bottom that I want to…
Amber K
  • 31
  • 1
3
votes
3 answers

Updating animation-duration in Javascript

After changing the animation-duration (or in this case, -webkit-animation-duration) property via JavaScript with setProperty("-webkit-animation-duration", value + "s"), I see the change in the element inspector in Chrome, but the actual animation…
ryantmer
  • 673
  • 2
  • 11
  • 21
3
votes
2 answers

-webkit-animation stops when scrolling on mobile safari

I'm making a css3 loading animation for a mobile website. The loader works just fine by using the following HTML / CSS: HTML:
CSS: .loader { background-color: rgba(0,0,0,0); border: 6px solid…
FLomid
  • 63
  • 2
  • 4
2
votes
1 answer

Webkit Keyframes on Hover - Prevent Previous Animation

I have an element that I have a set of @-webkit-keyframes to animate in. On page load, these keyframes run, and the intro looks great. Next, I have a second set of @-webkit-keyframes on hover and set to repeat, so on hover, that element has a…
jstm88
  • 3,335
  • 4
  • 38
  • 55
2
votes
3 answers

Difficult to stop infinite CSS animation in Android browser

I'm having little luck stopping or pausing an animation in Android 4.x browser / webview. I have -webkit-animation-iteration-count set to infinite and it's no problem stopping it in Chrome/Safari, but it fails in Android if the element has animated…
huulbaek
  • 31
  • 4
1
vote
1 answer

jquery html5 webkit-animation callback

Is there any callback on webkit-animation complete? see example @-webkit-keyframes "blink" { 0% { opacity: 1; } 100% { opacity: 0; } } .animate { background: #000; height: 100px; width: 100px; opacity: 0; …
puchu
  • 3,294
  • 6
  • 38
  • 62
1
vote
3 answers

Rotating animation doesn't work with chrome

I make an animation that works on Firefox but not on Chrome. I've tried a dozen of solutions but I can't seem to make it work. Here's my code: #path { animation-name: turn; transform-origin: 50px 50px; -webkit-animation: turn; …
Dwenya
  • 17
  • 2
1
vote
0 answers

Create typewriter effect animation inside a fixed speech bubble using CSS only

I'm trying to create a typewriter effect animation inside a "container"/speech bubble. For demo purposes, I've hardcoded in the text but in my final code, it's assigned to an ID that is populated via Javascript sourced from a SQL table. As you can…
GpioNelson
  • 45
  • 9
1
vote
3 answers

how to reverse this circle animation?

I found this code snippet online and I'm trying to reverse it so that the circle will go from fully white at 0% to 100% gradient circle and then stop the animation. However I can't seem to figure out the reversing part. I've tried fiddling with the…
Tim Foles
  • 11
  • 1
1
vote
1 answer

Set two webkit-animations to be same speed with one travelling a longer distance?

[Edit: Solution was to create two containers, with the second animation container set to left: 100%.] I have a very basic animation to move a large gif across the page, the gif is 1536px wide. The page can be infinitely wide and thus the animation…
Craig W
  • 13
  • 5
1
vote
1 answer

Using a Third Party Keyframes Definition

Font Awesome includes a spin animation for elements with the class fa-spin. Inspection of the CSS shows that a spinning elementis implemented using a keyframes definition again called fa-spin. Rather than define a new animation, I want to use this…
Dan Prince
  • 29,491
  • 13
  • 89
  • 120
1
2 3