Editing keyframe rules in CSS panel – Google Web Designer

Editing keyframe rules in CSS panel – Google Web Designer


KENT: hello my name is Kent. I’m the creative specialist on the Google Web Designer team and I’d like to show animation
keyframe editing in the CSS panel I’ll start by creating a new blank file I’ll give it a name and accept the other default settings Now I’ll create a simple animation so with the element tool and div modifier selected I’ll draw
a rectangle and color it red In the timeline I’ll right click at one second to insert a keyframe then switch to the selection tool and shift arrow key a few
times to change the position Now when I scrub the timeline I’ll see the
animation Previously if you wanted to edit this by hand you’d switch to code view and you can see an @keyframes rule here Now you can do the same thing
in design view using the CSS panel Here’s those same rules You can still make animation changes in the timeline but this just provides another way of
working For example I can insert new keyframes edit the location edit the properties and see these changes updated in the timeline This is useful if you
have a set of keyframes specified in percentages so you can enter those
values precisely in the CSS panel rather than eyeballing them in the timeline you can also remove keyframes in the CSS panel by highlighting the percentage and
deleting it And one last thing is you can also add new properties to animate So on my first keyframe I’ll add the property opacity and set it to zero You’ll see the end keyframe is updated automatically and is reflected on the
stage Now I’ll preview to confirm I see the intended animation So there you have another way of authoring keyframe animation using the CSS panel Thanks for watching! you


5 thoughts on “Editing keyframe rules in CSS panel – Google Web Designer

  1. Is it possible to create more complex animation in GWD? Not in theory, but in practice.

    For example like this http://flashambush.ru/portfolio/solaris-pcp/

    Do you know any place to search for tutorials on this subject?

  2. Off Topic from this video. Serious question: After you create a Parallax AD in Google Web Designer. You hit publish. You select Locally, Google Drive, Studio, Display Video 360. I pick locally. After I save the Zip drive to my folder on my computer. How do I then upload it to Google Ad Words ? Where or how do you upload your Zip file in the Google Ads portal ? Also once it gets uploaded how do you assign it to an Ad Group to run ? Hope my question makes sense.

Leave a Reply

Your email address will not be published. Required fields are marked *