xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 200px;
height: 100px;
background-color: red;
position: relative;
overflow: hidden;
transition: height 0.5s;
}
#box:hover {
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
xxxxxxxxxx
.my-div{
background-color: #f00;
animation: animationname 2s linear infinite;
/*animation: animation-name animation-duration animation-direction animation-iteration-count */
transition: .5s ease-in-out;
}
@keyframes animationname{
0%{
transform: translateX(10px);
}
100%{
transform: translateX(-10px);
}