在加载和悬停/退出时启动CSS动画

我想在两种情况下启动一个动画:

在页面加载的最开始
每当用户悬停/svg

我知道如何做悬停/出与CSS过渡，但是:如何启动加载时看到的动画?

你在鼠标悬停/退出时看到的动画，我想在页面加载时开始启动它。

不确定如何实现

Thanks a lot

https://codepen.io/fernandocomet/pen/poaqZEN?编辑= 1100

body {
margin: 0;
padding: 0;
}
.animation-design {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.left,
.right {
width: 215px;
height: 215px;
border: solid 1.2px #4d4e53;
border-radius: 50%;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
left: 100px;
top: 100px;
}
.animation-design .left,
.animation-design .right {
transition: all 3s;
transition-timing: ease-in-out;
}


.animation-design:hover .left {
transform: translateX(100px) rotateY(180deg);
}
.animation-design:hover .right {
transform: translateX(-100px) rotateY(180deg);
}
/******** Responsive Media Query ***********/
@media (max-width: 568px) { 

.animation-design {
width: 132px;
height: 132px;
}
.left, .right {
width: 90px;
height: 90px;
}
.right {
position: absolute;
left: 38px;
top: 38px;
}
.animation-design:hover .left {
transform: translateX(38px) rotateY(180deg);
}
.animation-design:hover .right {
transform: translateX(-38px) rotateY(180deg);
}
}

<body>
<div class="animation-design">
<div class="left"></div>
<div class="right"></div>
</div>
</body>

一种方法是通过javascript在body load上为元素添加动画，如下所示

let p = document.getElementById('PageLoad')
window.document.body.onload = function() {
p.style.animation = 'color 4s'
}

@keyframes color {
0%   {background-color: red;}
25%  {background-color: yellow;}
50%  {background-color: blue;}
100% {background-color: green;}
}

<p id='PageLoad'> hello world </p>

相关内容

最新更新

热门标签：