html - 同一元素上的 CSS 多个动画
问题描述
我的页面上有一个单曲<div>
。红色方块,我想对其应用 2 个动画:
- 在页面加载时移动这个方块
- 在鼠标悬停时更改正方形的颜色
这是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.animation {
width: 150px;
height: 150px;
background-color: red;
animation-name: anim;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.animation:hover {
animation-name: hover;
animation-duration: 1s;
}
@keyframes anim {
from {
}
30% {
transform: translateX(100px);
}
70% {
transform: translate(100px, 100%);
/*background-color: blue;*/
}
100% {
transform: translate(100px, 100%) scale(2, 2) rotate(145deg);
}
}
@keyframes hover {
from {
}
to {
background:yellow;
}
}
</style>
</head>
<body>
<div class="animation">
</div>
</body>
</html>
https://jsfiddle.net/tbqj4goy/
问题在于,当我将嘴悬停时,第一个动画会中断并从头开始。
有什么想法可以让这些动画毫无问题地协作吗?
解决方案
.animation {
width: 150px;
height: 150px;
background-color: red;
animation-name: anim;
animation-duration: 3s;
animation-fill-mode: forwards;
transition: 1s;
}
.animation:hover {
background-color: yellow;
transition: 1s;
}
@keyframes anim {
from {}
30% {
transform: translateX(100px);
}
70% {
transform: translate(100px, 100%);
/*background-color: blue;*/
}
100% {
transform: translate(100px, 100%) scale(2, 2) rotate(145deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="animation">
</div>
</body>
</html>
推荐阅读
- python - Python看门狗子进程队列
- sql-server - 变量作为列名 SQL Server
- excel - 在 VBA shell 命令访问被拒绝错误中打开 PDF
- angular - angular 7,属性选择器,防止清除现有内容
- qt - 如何让 TableView 的列占据所有父级
- r - Data missing when use limits in ggplot [R]
- javascript - 单击后如何隐藏按钮的最简单方法
- php - 警告:mysqli_real_connect(): (HY000/2002): 试图以访问权限禁止的方式访问套接字
- r - 理解函数的应用:x > y - z & x < y + z
- php - php(ssh2,隧道),我无法连接我的远程mysql服务器