CSS animations

HTML & CSS
1

hello everybody i need some help, what i try to do is that when the middle word (in this case GYM) scales up the words next to it has to be moving awai from it when it scales, my question is how, can someone help me?

HTML:

<body
<header
h1> Boxing <span GYM</span Life </h1
</header
</body

CSS:

span { 
    transition: all .5s ease-in-out; 
    display: inline-block;
    font-size: 20px;
}
span:hover { 
    transform: scale(2.5); 
    color: black;
}
2

Using a transition, it works similar to relative positioning, in that the element retains its original space in the document flow throughout the transition, so other elements are not affected.
You could do this by animating the font size, as that will affect the flow. Not sure how efficient that is though.

3

i dont understand but this is what im doing now

animation:

@keyframes mymove{
from {left: 0px;}
to {left: 200px;}
}

h1{
text-align: center;
flex: 20px;
color: white;
animation: mymove 2s;
}

why it doesnt read mymove

4

Hi there zouzi,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
h1 {
    text-align: center;
 }
 
h1 span { 
    margin: 0 0.25em;
    font-size: 0.625em;
    vertical-align: middle;
    transition:  0.5s ease-in-out; 
}
h1 span:hover { 
    font-size: 1.562em;
 }
</style>

</head>
<body> 

 <h1>Boxing<span>GYM</span>Life</h1>

</body>
</html>

coothead

1 Like
5

amazing that is what i meant

6

I am pleased that I was able to assist you. :winky:

coothead

7

The original script is not valid because it does not have matching opening and closing angled brackets.

Ensuring the script validates will give the transition a far better chance of working.

3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.