Animação tag <span> com CSS

19/08/2019

0

Olá programadores.

Gostaria de saber como coloco animação/transition na tag <span> usando apenas o CSS se possível.

gostaria de fazer com que o usuário passe sobre um texto >> {} e se transforme em outro com animação de 0.9s >> {G.M.R.R.}

muito obrigado galera :D
Ryan Figueiredo

Ryan Figueiredo

Responder

Posts

29/08/2019

Luciano

Olá programadores.

Gostaria de saber como coloco animação/transition na tag <span> usando apenas o CSS se possível.

gostaria de fazer com que o usuário passe sobre um texto >> {} e se transforme em outro com animação de 0.9s >> {G.M.R.R.}

muito obrigado galera :D


> Acho que é isso que vc quer, é só adaptar ao sei projeto:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>muda texto</title>
</head>

<style>

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
text-align: center;
background: #00C8FF;
}

p {
font-size: 1.6em;
font-family: 'Lato', sans-serif;
background-color: #fff;
padding: 1em;
color: #002240;
margin-top: 0;
}


.button {
display: inline-block;
position: relative;
margin: 1em;
padding: 0.67em;
border: 2px solid #FFF;
overflow: hidden;
text-decoration: none;
font-size: 2em;
outline: none;
color: #FFF;
background: transparent;
font-family: 'raleway', sans-serif;
}

.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.button:before,
.button:after {
content: '';
position: absolute;
top: 0.67em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s,opacity .6s;
-moz-transition: .4s,opacity .6s;
-o-transition: .4s,opacity .6s;
transition: .4s,opacity .6s;
}

/* :antes */

.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
}

/* :depois */

.button:after {
content: attr(data-active);
-webkit-transform: translate(150%,0);
-moz-transform: translate(150%,0);
-ms-transform: translate(150%,0);
-o-transform: translate(150%,0);
transform: translate(150%,0);
}

/* ativo */

.button:hover span,
.button:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}


.button:hover:before,
.button:active:after {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}


.button:active:before {
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
</style>
<body>

<p>Mudar texto ao passar mouse</p>
<button class="button" type="button" data-hover="Texto 2" data-active="Clicado"><span>
Texto 1</span></button>


</body>
</html>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar