Re: Consider Leverage more off CSS

On 8/08/2014 12:22 PM, L2L 2L wrote:
> E-S4L
>
>> On Aug 7, 2014, at 9:52 PM, "Tab Atkins Jr." <jackalmage@gmail.com>
>> wrote:
>>
>> On Thu, Aug 7, 2014 at 5:34 PM, L2L 2L <emanuelallen@hotmail.com>
>> wrote:
>>>> On Aug 7, 2014, at 7:25 PM, "Tab Atkins Jr."
>>>> <jackalmage@gmail.com> wrote:
>>>>
>>>>> On Wed, Aug 6, 2014 at 11:36 AM, L2L 2L
>>>>> <emanuelallen@hotmail.com> wrote: Yes it's different....
>>>>> I'mma redo it latter.
>>>>>
>>>>> What I'm proposing is that you can be able to define the
>>>>> duration--things of that nature-- via CSS too:
>>>>
>>>> I'm still not quite sure what you're suggesting.  You give a
>>>> ton of examples, but I'm not sure precisely which part of the
>>>> examples are showing off what you want.  Can you describe it
>>>> better, and then give an example of its use, rather than
>>>> relying purely on examples?
>>>>
>>>> The end of your email appears to contain several more unrelated
>>>> ideas. I'm not sure if that's supposed to be connected to
>>>> whatever you're suggesting with Web Animations, and I'm also
>>>> not sure what all that section is even trying to suggest.
>>>> Again, perhaps a simple, short description, along with a simple
>>>> example?
>> [snip your response]
>>
>> You responded to me by just quoting your previous emails (and, if
>> I'm seeing this correctly, expanding them).  That's the opposite of
>> what I asked for. ^_^
>>
>> ~TJ
>>
>
> (-_-) no I didn't it was different... Here, I snip off the beginning
> that explain the following. The first part is my proposal, and second
> part is a visualization of what I'm trying to convey to you and
> others: (-_-)
>
> --------------My Proposal--------------
>
> What I'm proposing is that you can be able to define the
> duration--things of that nature-- via CSS too:

You already can.

http://dev.w3.org/csswg/css-animations/#animation-duration

el {
   animation-duration: 3s;
}

Also you can also do other things which you have previously mentioned 
like 'animation-timing-function property', 'animation-iteration-count', etc.

http://dev.w3.org/csswg/css-animations/#contents


I would suggest doing a demo and stating what can't be done currently 
with CSS Animations.



 > CSS syntax optional version:
 >
 > var animA = new Animation(elem,
 > { left: '100px', top: '300px' },
 > {"animation-duration": "3s"});
 >

I don't understand this CSS optional version which looks like 
JavaScript. Anyway, you can not animate from *auto offsets*. It may do 
something in WebKit but they are not animatable types.

http://dev.w3.org/csswg/css-transitions/#animatable-css

   | left ||  as length, percentage, or calc


Note how 'auto' is not given as a value. Here is a demo:

<!DOCTYPE HTML>
<style type="text/css">
div {
   width: 100px; height: 100px; margin: 50px; position: relative;
}

#test1 {
   background: blue;
   -webkit-animation: move1 infinite;
   -webkit-animation-duration: 3s;
   animation-name: move1 infinite;
   animation-duration: 3s;
}
@-webkit-keyframes move1 {
   0% { left: auto; top: auto;  }
   100% { left: 100px; top: 300px; }
}
@keyframes move1 {
   0% { left: auto; top: auto;  }
   100% { left: 100px; top: 300px; }
}

#test2 {
   background: green;
   -webkit-animation: move2 infinite;
   -webkit-animation-duration: 3s;
   animation: move2 infinite;
   animation-duration: 3s;
}
@-webkit-keyframes move2 {
   0% { left: 0px; top: 0px; }
   100% { left: 100px; top: 300px; }
}
@keyframes move2 {
   0% { left: 0px; top: 0px;  }
   100% { left: 100px; top: 300px; }
}
</style>

<div id="test1"></div>

<div id="test2"></div>


Alan

Received on Friday, 8 August 2014 07:24:44 UTC