Sidebar slides in and out on page refresh - css

Question

I created a sidebar (hidden by default) in a web store that contains a list of items you like. When clicked on a button the likes-list will show sliding in from the right smoothly. However on page refresh/reload the sidebar slides in and out rapidly. I'm using css animation to do the trick.
It works fine but somehow on page reload the animation is triggered without clicking the button. How to prevent this from happening?
App is built in React (create-react-app).
React component
import React from 'react';
import { useGlobalContext } from '../Context'
import './likes.css';
const Likes = ({ showLikes, setShowLikes }) => {
let { liked, setLiked, paintings, setPaintings } = useGlobalContext()
//Remove item from likes list
const removeItemFromLikeslist = (id) => {
liked = liked.filter(item => {
return item.id !== id;
});
//Change likes-heart to green
paintings = paintings.map(el => {
if (el.id === id) {
el.like = false
}
return el
})
//remove sidebar overlay
if (liked.length === 0) {
setShowLikes(false)
}
setPaintings(paintings)
setLiked(liked)
localStorage.setItem("PAINTINGS", JSON.stringify(paintings))
localStorage.setItem('LIKES', JSON.stringify(liked))
}
return (
<div className={showLikes ? "likesContainer show" : "likesContainer"} >
<div className="likesHeader">You like these paintings</div>
{liked.map(item => {
const { id, name, imgSrc } = item;
return (
<div className="like-item" onClick={() => removeItemFromLikeslist(id)} key={id}>
<div className="like-info">
<img src={imgSrc} style={{ width: "100px" }} alt={name} className="picInCart" />
</div>
<div className="like-name">
<h5>{name}</h5>
</div>
</div>
)
})}
</div>
)
}
export default Likes
CSS file
.likesContainer {
position: fixed;
top: 83px;
right: -328px;
width: 320px;
background-color: rgb(70, 70, 70);
height:auto;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
z-index: 2;
box-shadow: 0px 4px 10px black;
animation: animateHide .5s linear forwards;
}
#keyframes animateHide {
from {
right: 0;
}
to {
right: -328px;
}
}
.likesContainer.show {
right: 0;
animation: animateShow .5s linear forwards;
}
#keyframes animateShow {
from {
right: -328px;
}
to {
right: 0;
}
}

Answer 1

Problem solved, changed from animation to transition like so:
.likesContainer {
position: fixed;
top: 83px;
right: -328px;
width: 320px;
background-color: rgb(70, 70, 70);
height:auto;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
z-index: 2;
box-shadow: 0px 4px 10px black;
transition: .5s ease-in-out;
}
.likesContainer.show {
right: 0;
}