Results 1 to 4 of 4

Thread: CSS (webkit) Filters and Animations

  1. #1
    Sencha User
    Join Date
    Aug 2013
    Location
    New York
    Posts
    19

    Default CSS (webkit) Filters and Animations

    I have an animation occuring in the timeline, it's a scale from 100% to 0%. On that same scaling animation, I want to add a blur and darken to image. I'm using CSS3 webkit Filters, but it can't seem to animate both the scale and the blur/brightness at the same time. When I apply the animation to the scaling animation using jquery, all animations on that element break. Is there a way to do this inside sencha?

    BTW, I'm aware I could scale the image outside of sencha too, but i have many images that this needs to be applied to and as the images shrink, they also move so i'm trying to avoid having to grab all the coordinates of each image.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    304

    Default

    Hi webreality_ny,

    You can add webkit filters under Keyframe Properties -> Custom CSS for each keyframe, and the browser should animate them. Be aware though that -webkit-filter properties only seem to animate properly in Safari currently. Chrome will render them for the first keyframe, but they won't animate, and all the other browsers won't even display them.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    304

    Default

    I created a quick sample project for you, you can get it at https://github.com/mbojic/example_blur_and_scale

    Please note that this will only work correctly in Safari.

  4. #4
    Sencha User
    Join Date
    Aug 2013
    Location
    New York
    Posts
    19

    Default It Worked!

    Great tip, thanks for the help. This works where I need it to. For reference, here's the support on CSS filters: http://caniuse.com/#feat=css-filters

    And you were right, the animation doesn't work right in Chrome, only in Safari 6+ (which means windows users won't see it in Safari since that's only up to 5)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •