How do I animate my pseudo elements in CSS?-CodePudding

I'm trying to animate my cross but the @keyframes doesn't seem to work.. Any suggestions? It seems coming from the pseudo elements but no idea why or how to fix it.. Also I don"t know how to center the cross and circle in the middle of the boxes.. I'd like all of it to be responsive of course. Do you have any advice?

h1 {
    text-align: center;
    margin-bottom: 10rem;
}

table {
    margin: auto;
}

td {
    width: 100px;
    height: 100px;
}

.vertical {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.horizontal {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.o {
    height: 30%;
    width: 30%;
    border: 2px solid white;
    border-radius: 50%;
}

.x {
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
}

.x:before,
.x:after {
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: red
}

.x:before {
    transform: rotate(45deg);
}

.x:after {
    transform: rotate(-45deg);
}

#two,
#two:before,
#two:after {
    animation: cross 2s 1s;
    animation-fill-mode: forwards;
}

#one {
    animation: circle 3s 1s;
    animation-fill-mode: forwards;
}


#three {
    animation: circle 3s 3s;
    animation-fill-mode: forwards;
}

#five {
    animation: circle 3s 5s;
    animation-fill-mode: forwards;
}

#seven {
    animation: circle 3s 7s;
    animation-fill-mode: forwards;
}

@keyframes circle {
    from {
        border-color: white;
    }

    to {
        border-color: black;
    }
}

@keyframes cross {
    from {
        border-color: white;
    }

    to {
        border-color: red;
    }
}

<h1>Thinking outside the box</h1>
<table>
    <tr>
        <td>
            <div  id="two"></div>
        </td>
        <td >
            <div  id="one"></div>
        </td>
        <td>
            <div ></div>
        </td>
    </tr>
    <tr>
        <td >
            <div ></div>
        </td>
        <td >
            <div  id="three"></div>
        </td>
        <td >
            <div  id="four"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div  id="five"></div>
        </td>
        <td >
            <div ></div>
        </td>
        <td>
            <div  id="seven"></div>
        </td>
    </tr>
</table>

CodePudding user response：

Your x has no border, so you can't change the border color.

h1 {
    text-align: center;
    margin-bottom: 10rem;
}

table {
    margin: auto;
}

td {
    width: 100px;
    height: 100px;
}

.vertical {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.horizontal {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.o {
    height: 30%;
    width: 30%;
    border: 2px solid white;
    border-radius: 50%;
}

.x {
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    color: white;
}

.x:before,
.x:after {
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: currentColor;
}

.x:before {
    transform: rotate(45deg);
}

.x:after {
    transform: rotate(-45deg);
}

#two {
    animation: cross 2s 1s;
    animation-fill-mode: forwards;
}

#one {
    animation: circle 3s 1s;
    animation-fill-mode: forwards;
}


#three {
    animation: circle 3s 3s;
    animation-fill-mode: forwards;
}

#five {
    animation: circle 3s 5s;
    animation-fill-mode: forwards;
}

#seven {
    animation: circle 3s 7s;
    animation-fill-mode: forwards;
}

@keyframes circle {
    from {
        border-color: white;
    }

    to {
        border-color: black;
    }
}

@keyframes cross {
    from {
        color: white;
    }

    to {
        color: red;
    }
}

<h1>Thinking outside the box</h1>
<table>
    <tr>
        <td>
            <div  id="two"></div>
        </td>
        <td >
            <div  id="one"></div>
        </td>
        <td>
            <div ></div>
        </td>
    </tr>
    <tr>
        <td >
            <div ></div>
        </td>
        <td >
            <div  id="three"></div>
        </td>
        <td >
            <div  id="four"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div  id="five"></div>
        </td>
        <td >
            <div ></div>
        </td>
        <td>
            <div  id="seven"></div>
        </td>
    </tr>
</table>

To center the symbols, you shouldn't use a table. Tables are only for presenting table data like data sheets, invoices et cetera. Try a css grid instead and use justify-content and align-items to center your elements inside.

CodePudding user response：

Figured I'd add a couple changes also but tried not to deviate too much from what you were originally doing...either way another example to tinker with that would need tweaked etc.

h1 {
    text-align: center;
    margin-bottom: 10rem;
}

table {
    margin: auto;
}

td {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
}

.vertical {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.horizontal {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.o, .x {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.o {
    border: 2px solid white;
    border-radius: 50%;
}

.x {
  position: relative;
}

.x:before {
    position: absolute;
    top: -27px;
    left: 23px;
    content: '\002b';
    font-size: 100px;
    height: 50px;
    width: 50px;
    font-weight: 700;
    color: white;
    transform: rotate(45deg);
}


#two:before {
    animation: cross 2s 1s forwards
}

#four:before {
    animation: cross 2s 2s forwards
}

#six:before {
    animation: cross 2s 3s forwards
}

#eight:before {
    animation: cross 2s 4s forwards
}

#ten:before {
    animation: cross 2s 5s forwards
}

#one {
    animation: circle 3s 1s forwards;
}


#three {
    animation: circle 3s 3s forwards;
}

#five {
    animation: circle 3s 5s forwards;
}

#seven {
    animation: circle 3s 7s forwards;
}

@keyframes circle {
    to { border-color: black; }
}

@keyframes cross {
    to { color: red }
}

<h1>Thinking outside the box</h1>
<table>
    <tr>
        <td>
            <span  id="two"></span>
        </td>
        <td >
            <span  id="one"></span>
        </td>
        <td>
            <span  id="eight"></span>
        </td>
    </tr>
    <tr>
        <td >
            <span  id="six"></span>
        </td>
        <td >
            <span  id="three"></span>
        </td>
        <td >
            <span  id="four"></span>
        </td>
    </tr>
    <tr>
        <td>
            <span  id="five"></span>
        </td>
        <td >
            <span  id="ten"></span>
        </td>
        <td>
            <span  id="seven"></span>
        </td>
    </tr>
</table>