Animação tag <span> com CSS

HTML5

CSS3

19/08/2019

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

Curtidas 0

Respostas

Luciano

Luciano

19/08/2019

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>
GOSTEI 0
POSTAR