Les animations CSS

Animation CSS - Franck-S

Animate in CSS

With a CSS code, you can animated simple forms or image that you have imported in your HTML code. You can also animated illustrations and all the forms included in it. This week I had to code this kind of animation.

Simple animations

animation-simple For this part of simple animatons, I've studied the different tags in CSS allowing movements. I have drawn a square with CSS code. The animation is to change color in it an make it move. With a some tags, I easily realised this animation. After this exercise, I have drawn a circle and make it rotade. I added others circles that each have their own direction of rotation. The visual effect was perfect. So I tried with a spiral. I drawn two spirals and make one of them turn a deth effect then appeared. Simple animations are easy to code and you quickly have a correct visual result.

Animations from a SVG file in CSS

animation complexe for animations from an svg file, I first drew a scene. in this decor, I first add a car that drives from left to right then a truck in the opposite direction and finally a bike. I also animated the sun turning on and off the lights of the apartments following its ride in the sky. I animated also a plane and some cats on roofs and tree. animation complexe this type of animation is very interesting and allows to consider the development of Internet banners in another way. animation complexe finally I realized an interactive map of Brittany. When you fly over the mouse, they are displayed and a link to a web page of the department's presentation.The difficulty in this exercise was to make the department disappear and put a link under the image below. animation complexe Animate in css is very useful and allows to have animated illustrations online which have little weight. but quickly we feel the frustration of not being able to make more complex and elaborate animations.

 24 janv. 2019 -  Franck-S - integration web,   animation css 2D