Animacao001

Animação das propriedades: - width - height - top - left

by Alexandre Gomiero de Oliveira

HTML

<div id="container">
            <svg
                 xmlns:dc="http://purl.org/dc/elements/1.1/"
                 xmlns:cc="http://creativecommons.org/ns#"
                 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                 xmlns:svg="http://www.w3.org/2000/svg"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                 width="44.918457mm"
                 height="41.290115mm"
                 viewBox="0 0 159.15989 146.30356"
                 id="svg2"
                 version="1.1"
                 inkscape:version="0.91 r13725"
                 sodipodi:docname="icone2.svg">
            <defs
               id="defs4" />
            <sodipodi:namedview
               id="base"
               pagecolor="#ffffff"
               bordercolor="#666666"
               borderopacity="1.0"
               inkscape:pageopacity="0.0"
               inkscape:pageshadow="2"

               inkscape:cx="92.109349"
               inkscape:cy="-18.163609"
               inkscape:document-units="px"
               inkscape:current-layer="layer1"
               showgrid="false"
               inkscape:window-width="1920"
               inkscape:window-height="1017"
               inkscape:window-x="-8"
               inkscape:window-y="-8"
               inkscape:window-maximized="1"
               fit-margin-top="0"
               fit-margin-left="0"
               fit-margin-right="0"
               fit-margin-bottom="0" />
            <g
               inkscape:label="Layer 1"
               inkscape:groupmode="layer"
               id="layer1"
               style="opacity:0.97000002"
               transform="translate(-215.41992,-463.49609)">
              <path id="nuvem"
                ...

CSS

#container {
  position: relative;
  float: left;
  width: 90mm;
  height: 90mm;
  left:20px;
  top:100px;
  background: rgb(240, 240, 255);
}

@keyframes animacao-escala-rotaciona {
  0%   { width:45mm; height: 45mm; top: 50%; left: 50%; }
  50%  { width:55mm; height: 55mm; top: 45%; left: 45%; }
  100% { width:45mm; height: 45mm; top: 50%; left: 50%; transform: rotate(360deg); }
}

#svg2 {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 45mm;
  height: 45mm;
  margin: -23mm 0 0 -23mm;
  animation:
    animacao-escala-rotaciona 4s infinite running linear;
}