What are keyframe percentages based on?

[greenace92]

I am new to using animation and I want to have some photos scroll 

 

I have it working, I just want to know what the percentages are based on and perhaps knowing that I can absolutely design a website rather than being vague. 

 

Another side question is the method that the images are loaded... I'm wondering if it is possible to load one image at a time while having a seamless animation, even using infinite. 

 

I don't want to load a bunch of pictures at once or string photos together and string them to make one large image to be scrolled... I need the animation to stop when hovering over any photo and also for each of those photos to link to a unique location. 

I've got the linking done but the stopping eludes me... I can achieve it if I animate photos individually and maybe I will have to follow that route for now which this is based on the lifetime of the photo eg. screen space. 

 

Thanks for any help 

[kicken]

The keyframe selector for a keyframe style rule consists of a comma-separated list of percentage values or the keywords ‘from’ or ‘to’. The selector is used to specify the percentage along the duration of the animation that the keyframe represents. The keyframe itself is specified by the block of property values declared on the selector. The keyword ‘from’ is equivalent to the value ‘0%’. The keyword ‘to’ is equivalent to the value ‘100%’.

Emphasis added.

 

Basically it's the percentage of the duration given by animation-duration property. So if you had a animation with keyframes at 0%, 25%, 50%, and 100% and animation-duration: 4s then

0% = 0s

25% = 1s

50% = 2s

100% = 4s

 

If the duration were instead 10s then you'd have:

0% = 0s

25% = 2.5s

50% = 5s

100% = 10s

 

 

If you want further help with whatever image animations you're attempting to create, you'll need to post the css and associated HTML you are using and a description of what exactly you're trying to do.

[greenace92]

Well it is apparent here

 

http://www.dn2d8.com 

 

This is far from finished but you can see the part that is relevant to this post

 

This is not my "complete-attempt-failed-get-help" work at this point as I have only began to lay out everything on paper, like how the code works 

 

I was just wondering if I need to know the exact pixel count of my images and the size of a display panel that I want to use, so I don't really have CSS code at the moment as I have been taking samples, putting them together, modify, refresh, observe change, repeat again 

 

Of course I did follow a four piece tutorial on how to do CSS animation 

 

I'm doing everything on this website, which is fine, I have the time and desire to learn, I just wish it would "perfect" as in, many people doing what they love and are professionals as opposed to a kid amassing all of the information he can find and hopefully having a functioning product. 

I can do it. It is somewhat difficult but really it is just a matter of time. 

Tea really helps, and eating very little, I ate a lot today and I am just feeling lethargic as hell. 

 

Then there's that effect where you just absorb a crap load of information, then you like hit this peak and it all goes away... no 

 

hence a few hours ago that stuff was fresh in my mind the photo scrolling, but now I ca barely remember it. Thankfully I have a thick notebook with drawings and notes everywhere. 

 

The internet is wonderful. Everything I need is here. 

 

I am grateful for the help I receive. 

[greenace92]

I don't understand what is going on... I keep getting this 404 request, document handler message

 

There is also this weird thing where if I click on that link while looking at this page, eg, this thread, I am redirected to this thread 

 

I'm not sure if that is an anti-advertising thing or if it really is my messed up browsers... 

 

I look it up on my windows phone and it's fine 

I look it up on my firefox browser and my chromium browser, I am using linux with Apache installed running a server on my computer, it does not work.... 404 problem 

 

I also recently had this blacklisting IP problem with WHM... gahhh and they (GoDaddy) would whitelist or whitelisted one IP address which didn't help as mine is Dynamic... anyway... you should be able to access my site there to see what I'm trying to do. 

 

I expect people to say "Stay away from scrolling" "It's bad..." but that is a key thing in my website.

 

I just think "People are lazy" why scroll when you can watch

 

Oooh "She's hot" mouse over her card, scrolling stops 

 

Oh yeah, this website is currently NOT optimized for mobile viewing. I don't intend to keep the same design for mobile. 

I'll have a piece of code determine the screen resolution / orientation / aspect ratio and redirect to two different websites, it's not even about responsive web design in terms of scaling, just the way the content is presented, it is ideal for one page but not ideal for another... the mobile version is another problem to deal with, but once the laptop version is done, it should be clear how I will design the mobile version. 

 

The scrolling does not work in mobile, because the container is too small, displays every image... 

Edited December 4, 2014 by greenace92

[greenace92]

This is an "empty" promise until completed but I noticed that at least three of my posts have received at least a thousand views already... but only 1 or 2 responses which I don't know if that suggests that people don't like what I write or they too are searching for what I am searching for. 

 

Anyway, once the site is done, I will answer my own questions with consolidated code to return the favor of helping me make my vision come true. 

 

" Vision" haha, supernatural or dream 

[jeffreyappel]

This is the percentage of animation duration.If you use 20% this means when the whole duration is 100sec then20% is 20 sec.