{"id":260940,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/de-vida-as-suas-paginas-da-web-com-animacoes-e-transicoes-css\/"},"modified":"2023-08-13T09:51:00","modified_gmt":"2023-08-13T06:51:00","slug":"de-vida-as-suas-paginas-da-web-com-animacoes-e-transicoes-css","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/de-vida-as-suas-paginas-da-web-com-animacoes-e-transicoes-css\/","title":{"rendered":"D\u00ea vida \u00e0s suas p\u00e1ginas da Web com anima\u00e7\u00f5es e transi\u00e7\u00f5es CSS"},"content":{"rendered":"

\n Os designs de sites est\u00e3o em constante evolu\u00e7\u00e3o. Desde design responsivo, tipografia bonita, esquemas de codifica\u00e7\u00e3o de cores perfeitos, ilustra\u00e7\u00f5es, os criadores do site est\u00e3o apresentando novas ideias e designs todos os dias.\n<\/p>\n

\n Atualmente, os usu\u00e1rios t\u00eam grandes expectativas em rela\u00e7\u00e3o \u00e0s interfaces de usu\u00e1rio devido ao conte\u00fado de alta qualidade dispon\u00edvel na Internet. \u00c0 medida que as interfaces do site est\u00e3o evoluindo, a tecnologia por tr\u00e1s delas tamb\u00e9m est\u00e1 evoluindo. Um dos principais componentes respons\u00e1veis \u200b\u200bpor aprimorar a interface do site \u00e9 o CSS<\/strong>.\n<\/p>\n

\n CSS ou Cascading Style Sheets s\u00e3o respons\u00e1veis \u200b\u200bpor tornar os sites muito interativos, definindo seu estilo, layout e designs. O mais recente padr\u00e3o para CSS, ou seja, o CSS3 introduziu o conceito de anima\u00e7\u00f5es<\/strong> e transforma\u00e7\u00f5es<\/strong> que aprimoram a experi\u00eancia do usu\u00e1rio adicionando profundidade extra \u00e0 interface do usu\u00e1rio. Com anima\u00e7\u00f5es e transi\u00e7\u00f5es CSS, voc\u00ea pode contar hist\u00f3rias, criar efeitos luxuosos e tornar a intera\u00e7\u00e3o do usu\u00e1rio com seu site muito eficaz e significativa.\n<\/p>\n

\n Uma anima\u00e7\u00e3o \u00e9 apenas uma simula\u00e7\u00e3o de movimento que \u00e9 criada exibindo uma s\u00e9rie de objetos como imagens, um ap\u00f3s o outro. A transi\u00e7\u00e3o, por outro lado, \u00e9 basicamente um processo no qual um objeto muda de um estado para outro. Mas, quando falamos de anima\u00e7\u00f5es na web, existem basicamente tr\u00eas tipos \u2013 anima\u00e7\u00f5es CSS<\/strong> ou anima\u00e7\u00f5es de quadro-chave, transi\u00e7\u00f5es CSS<\/strong> e anima\u00e7\u00f5es JavaScript<\/strong>.\n<\/p>\n

\n Anima\u00e7\u00f5es CSS\n<\/p>\n

\n Para criar anima\u00e7\u00f5es em CSS, precisamos alterar as propriedades CSS de um elemento, como uma imagem ou texto, por um determinado per\u00edodo de tempo. Podemos alterar as propriedades dos elementos quantas vezes quisermos e tamb\u00e9m definir a dura\u00e7\u00e3o da anima\u00e7\u00e3o.\n<\/p>\n

\n Especificando @keyframes
\n<\/h5>\n

\n As anima\u00e7\u00f5es CSS s\u00e3o definidas bit com quadros-chave. Esses quadros-chave s\u00e3o os pontos intermedi\u00e1rios da anima\u00e7\u00e3o. Todas as anima\u00e7\u00f5es CSS s\u00e3o especificadas na regra @keyframes. Esses quadros-chave especificam o que acontece com o elemento em um determinado momento, ou seja,\n<\/p>\n

    \n
  • quais propriedades est\u00e3o mudando\n <\/li>\n
  • quando o elemento \u00e9 animado\n <\/li>\n
  • como o elemento \u00e9 animado\n <\/li>\n<\/ul>\n

    \n Voc\u00ea pode definir seu pr\u00f3prio quadro-chave como:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Aqui ‘para' e ‘de' especificam o in\u00edcio e o fim da anima\u00e7\u00e3o. Tamb\u00e9m podemos especificar anima\u00e7\u00f5es para momentos intermedi\u00e1rios de tempo entre o in\u00edcio e o fim, assim:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Aqui 0% representa o in\u00edcio da anima\u00e7\u00e3o, 100% representa o final da anima\u00e7\u00e3o e 50% significa a mudan\u00e7a entre o in\u00edcio e o fim. Mas, como dizemos ao navegador por quanto tempo a anima\u00e7\u00e3o deve ocorrer? Fazemos isso com a ajuda de certas propriedades de anima\u00e7\u00e3o<\/strong>. Essas propriedades de anima\u00e7\u00e3o est\u00e3o associadas ao elemento a ser animado. Por exemplo:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  Aqui, o elemento pode ser qualquer tag HTML como div, span, img, p etc. e style_property<\/code>qualquer propriedade de estilo CSS como background_color, width, height etc.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: Keyframes s\u00e3o usados \u200b\u200bpara especificar o c\u00f3digo de anima\u00e7\u00e3o conforme discutido acima.\n  <\/li>\n
    2. \n    animation-name<\/strong>: O nome especificado com @keyframes \u00e9 o nome da anima\u00e7\u00e3o. Este nome \u00e9 usado para referenciar os quadros-chave com o elemento a ser animado.\n  <\/li>\n
    3. \n    animation-duration<\/strong>: \u00c9 usado para especificar o tempo de dura\u00e7\u00e3o da anima\u00e7\u00e3o em segundos ou milissegundos. Por exemplo, se definirmos para 5 segundos, a anima\u00e7\u00e3o ser\u00e1 executada por apenas 5 segundos. Se n\u00e3o definirmos essa propriedade, a anima\u00e7\u00e3o n\u00e3o ser\u00e1 executada, pois seu valor padr\u00e3o \u00e9 0.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: Podemos atrasar o in\u00edcio da anima\u00e7\u00e3o especificando o tempo de atraso da anima\u00e7\u00e3o. Por exemplo, se voc\u00ea deseja iniciar a anima\u00e7\u00e3o 5 segundos ap\u00f3s o carregamento da p\u00e1gina no navegador, basta definir o atraso da anima\u00e7\u00e3o para 5s.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: Podemos dizer ao navegador se uma anima\u00e7\u00e3o se move na dire\u00e7\u00e3o reversa ou em ciclos alternados com esta propriedade. Por exemplo, se voc\u00ea deseja que a anima\u00e7\u00e3o seja executada do in\u00edcio ao fim, defina o valor de animation-duration como ‘normal'. Se voc\u00ea deseja que ele seja executado de ponta a ponta, basta definir o valor como ‘reverso'.\n  <\/li>\n
    6. \n    animation-fill-mode<\/strong>: Podemos especificar o estilo do elemento quando a anima\u00e7\u00e3o n\u00e3o est\u00e1 sendo reproduzida com este modo, ou seja, quando a anima\u00e7\u00e3o \u00e9 atrasada ou finalizada, qual deve ser o estilo do elemento.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: O n\u00famero de vezes que uma anima\u00e7\u00e3o pode ser reproduzida \u00e9 representado por esta propriedade. Por exemplo, se voc\u00ea deseja reproduzir a anima\u00e7\u00e3o uma vez, defina-a como 1, ou se deseja que a anima\u00e7\u00e3o seja reproduzida indefinidamente, defina-a como ‘infinito'.\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: Esta propriedade \u00e9 usada para especificar a curva de velocidade da anima\u00e7\u00e3o como linear, acelera\u00e7\u00e3o ou desacelera\u00e7\u00e3o.\n  <\/li>\n
    9. \n    Anima\u00e7\u00e3o<\/strong>: \u00c9 a propriedade abreviada para definir todas as propriedades da anima\u00e7\u00e3o.\n  <\/li>\n<\/ol>\n
      \n  Por exemplo, voc\u00ea pode animar um objeto saltitante com o trecho de c\u00f3digo a seguir. Observe como a nota\u00e7\u00e3o abreviada para anima\u00e7\u00e3o foi usada aqui.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  Transi\u00e7\u00f5es
      \n<\/h3>\n
      \n  As transi\u00e7\u00f5es CSS s\u00e3o aplicadas \u00e0s propriedades dos elementos por uma determinada dura\u00e7\u00e3o de tempo com base em certas fun\u00e7\u00f5es de temporiza\u00e7\u00e3o,<\/strong> tamb\u00e9m conhecidas como fun\u00e7\u00f5es de easing. Por fun\u00e7\u00e3o de temporiza\u00e7\u00e3o, queremos dizer uma fun\u00e7\u00e3o que mudar\u00e1 as propriedades dos elementos de um estado para outro, como progress\u00e3o linear, acelera\u00e7\u00e3o ou desacelera\u00e7\u00e3o. Voc\u00ea deve ter notado que uma imagem desliza ou se transforma em outra imagem ao passar o mouse ou um som \u00e9 reproduzido ao clicar no mouse. Todos esses s\u00e3o efeitos de transi\u00e7\u00e3o que podem tornar um site interativo.\n<\/p>\n
      \n  As fun\u00e7\u00f5es de easing<\/strong> s\u00e3o importantes para criar transi\u00e7\u00f5es. Eles especificam como as propriedades ser\u00e3o alteradas. Eles tamb\u00e9m podem alterar a taxa na qual o valor das propriedades muda do ponto inicial ao ponto final de uma transi\u00e7\u00e3o. Voc\u00ea pode aplicar transi\u00e7\u00f5es da seguinte maneira:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Aqui o elemento especifica o elemento HTML que voc\u00ea deseja transformar como div, H1, img etc. style_property \u00e9 o estilo CSS aplicado nesse elemento. Vejamos agora algumas propriedades de transi\u00e7\u00e3o<\/strong> :\n<\/p>\n