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
1
vote
1 answer

The other div moves along with the first div (on the animation of the first div)

My aim is to build a image slider, where WHILE the APPLE logo animation runs, the apple products swoop by from under. The problem is this, I have added @keyframes animation to make the iPhone appear from right (our right) and then leave as it swoops…
Danish
  • 11
  • 2
1
vote
0 answers

Animation cards Javascript and CSS

I would move cards on click and put them on the green table with animation of transition; then when cards are on the table, when i click on them, they must show their front face, and then return with back face. The code doesn't work, i see the back…
Juppy
  • 111
  • 2
  • 10
1
vote
1 answer

run keyframes-animation on click more than once

i have a div that it have image content .i wanna implement animation when i click in image but it do only with first click and next click in image is Ineffective.what is problem and how can i solve it? $(function () { …
aminkourosh
  • 45
  • 1
  • 4
1
vote
2 answers

Changing -webkit-animation-play-state with javascript

Hi I have been trying to figure out how to change my css3 -webkit-animation-play-state from paused to running by clicking on another div. Does any one know how I would do this?? Im assuming I would need to use JavaScript.
John
  • 11
  • 1
  • 2
0
votes
2 answers

Animation returns to the beginning keyframe

I want my CSS animation to run through once and stop at the final keyframe, but right now it just returns to the first keyframe and the animation stops. The animation consists of a title heading that fills up with color through time. I am using this…
Santiago Fabregat
  • 684
  • 5
  • 18
0
votes
1 answer

Trigger a webkit animation to scroll when in viewport?

I've been scouring the internet and StackOverflow for quite some time to find a solution to my problem but nothing is working. So figured I'd just make my own post to throw into the ring of questions about triggering animations when scrolling in…
shoobydoo
  • 3
  • 2
0
votes
3 answers

-webkit-transform unsupported property

I am trying to apply a transform (scale + translation) to a div in css: .my-div { -ms-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%); -webkit-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%); …
Josh Gafni
  • 2,831
  • 2
  • 19
  • 32
0
votes
1 answer

Can someone please explain why one of these webkit animation functions works and the other doesn't. I know its the class vs ID but why?

This is just test code so don't think about it too much. But anyways I cant understand why animation play states will work and change fine when a class is used but not when I use an ID. Is there other rules when using ID's or can you not use…
Ethan Dunzer
  • 3
  • 3
0
votes
1 answer

Table border not appearing on later elements when using css webkit animation

I have a horizontally scrolling table on my website that has a width of 300% of the screen. On smaller screen sizes the 's that appear later in the table don't have a border like the rest of them. I have all td elements to have a border and don't…
user5789
  • 5
  • 2
0
votes
2 answers

Webkit animation delay doesn't working with expression (javascript)

I'm making a navbar with css and javascript and I'm getting an issue, when I put a expression in the webkit animation delay it doessn't work, but when I put a number it works. this doesn't work: link.style.webkitAnimation = "navLinkFade ease 0.5s…
motyas
  • 1
  • 2
0
votes
0 answers

Safari textarea font gradient animation bug

I've been trying to find a solution for this bug I'm having where the text in the textarea doesn't show on load, it only shows on click or hover. It works fine in Chrome. Screencast of the issue https://share.getcloudapp.com/P8uynjxx See fiddle here…
designtocode
  • 2,215
  • 4
  • 21
  • 35
0
votes
0 answers

how to do typewriter effect with line break with only css and html?

how to do typewriter effect with line break with only css and html? im making a personal site and am trying out stuff to make certain elements in which i want on my website and i was intrigued by css animations and i wanted to do a typewriter in…
DylxnTN
  • 1
  • 5
0
votes
2 answers

Click event on checkbox not handled because of CSS animation

I have an input and a checkbox, when the input is focused it display some information under it. The problem is : when those information are displayed if I click on the checkbox it hides the information (because my input is not focused anymore) but…
JeanJacques
  • 1,754
  • 1
  • 12
  • 25
0
votes
1 answer

webkitAnimationEnd fires at the start

I'm trying to animate a scrolling ticker that moves text horizontally across the screen. The webkitAnimationEnd event appears to fire as soon as the page is loaded, rather than when the animation has finished. Why is this happening? When I look at…
velw
  • 11
  • 5
0
votes
1 answer

Animate several div/images to slide on screen for a livestream layout (html, css, webkit animation)

I am trying to set up a little animation for my livestream that slides 3 images onto the screen from the left side, and once all 3 are on screen have them stay there for about 30 seconds then slide back off screen. I would like this 30 second…
Ele Hex
  • 21
  • 3
1
2
3