所以我正在尝试做一些像tiles或者netflix那样的事情。我有一个盒子，我试图让它在鼠标悬停时变大，并在鼠标离开时缩小尺寸。到目前为止我有这个。
.nav {
position: relative;
top: 25%;
width: 100%;
color: black;
text-align: center;
}
.nav a {
color: white;
text-decoration: none;
}
.link {
font-size: 24px;
width: 100%;
height: 25%;
background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
display: inline;
padding-right: 12.5%;
padding-left: 12.5%;
padding-bottom: 6.25%;
padding-top: 6.25%;
box-shadow: 0px 0px 10px 5px grey;
animation-name: downsize;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.link:hover {
animation-name: resize;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 32px;
padding-right: …我正在作为开发人员开发一个网站（我没有设计，其他人给了我 HTML/CSS），我们为异步加载组件提供了一个很好的旋转动画。它的永远旋转的动画是由以下 CSS 规则定义的：
animation: spinning 1s infinite linear;（它也有供应商前缀版本，但无关紧要）。
动画spinning定义为：
@keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
position: absolute !important我们的设计师为旋转元素添加了一个属性。我试图将它放置在其他元素中，但我认为该属性是不相关的。我一移开position: absolute，旋转器就停止旋转。当我再次添加它时，旋转器再次开始旋转。
我也尝试过其他position值，看起来absolute和fixed工作正常（关于旋转动画），同时relative和static导致动画停止。
为什么 CSS 位置属性会影响旋转动画？
这是重现问题的片段：
@keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
@keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#first{ …我有下面的代码，我正在尝试将图像旋转 360 度。但旋转会摇晃。
.pully {
position: absolute;
right: 3.7em;
bottom: 1em;
z-index: 11;
animation-name: clockwiseSpinner;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.line {
position: absolute;
right: 145px;
bottom: 10px;
height: 200px;
border-right: 2px solid red;
}
@-webkit-keyframes clockwiseSpinner {
from {-webkit-transform: rotate(0deg)}
to {-webkit-transform: rotate(360deg)}
}<div class="line"></div>
<img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt="">知道如何消除这种不稳定吗？
无论我如何尝试，我都无法让该动画在 Safari 12 中正常工作。我已经尝试过供应商前缀等，但没有任何效果。
它在 Chrome 中运行良好。有人有主意吗？
<div class="spinners"></div>
这是CSS：
@keyframes spinx {
0% {
transform: rotate3d(0, 1, 1, 360deg);
}
100% {
transform: rotate3d(0, 0, 0, 360deg);
}
}
.spinners {
display: block;
width: 100%;
height: 4rem;
overflow: hidden;
position: relative;
}
.spinners:before, .spinners:after {
content: "";
width: 4rem;
height: 4rem;
border: 3px solid red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -2rem 0 0 -2rem;
display: block;
transform-origin: 50% 50% 0;
}
.spinners:before {
animation: spinx …我在垂直设置图标动画以使它们无限地相互改变时遇到问题。
问题是我有两个图标，我需要它们以（第一个图标 - 青蛙，第二个图标 - 鸟）1 -> 2 -> 1 -> 2 的方式更改，这样看起来就像一个朝一个方向的完整循环（底部），我现在所拥有的是第一个图标到第二个图标根据需要进行更改，然后我的动画返回到第一个图标，向后而不是向前。
这是代码笔
如果有人能帮助我，我会很高兴。
@keyframes rotate {
10%, 15% {
transform: translateY(0);
}
25%,36% {
transform: translateY(-45px);
}
}
我有 5 个物品，例如猫、狗、大象、河马、狮子。
我需要构建一个 h1 文本，每隔 3 或 4 秒自动更改一次，如下所示
如果我是猫，那么我就不是狗或大象。
如果我是狗，那么我就不是猫或大象。
如果我是大象，那么我就不是猫或狗。
如果我是河马，那么我就不是大象或狮子。
如果我是狮子，那么我就不是大象或河马。
所以无论 I'm 之后是什么，都不能出现在句子的其余部分中。Y 和 Z 可以是列表中的任何内容。
<h1>If I'm X, then I'm not Y, and Z </h1>
这里X、Y和Z像这样动态变化
X、Y 和 Z 同时上升，然后是下一个可能的文本
所以我试着在我网站的链接中添加一个简单的振动动画,但它根本不起作用.有人发现我的代码有问题吗？
我从animista.net上获取了动画代码,然后他们就在那里工作了
这是我的代码:
a {
text-decoration: none;
animation: vibrate 1s linear infinite both;
}
@keyframes vibrate {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}<a href="mailto:me@eduardstefan.com" id="cta">Drop me a line and let’s do cool things together!</a>所以我需要让一个平面图标像这样浮动。我只需要用 CSS 动画来制作它，不需要 JS。我不知道如何让它向上和向下飞行。我附上了一些我写的代码。
\n\nhtml
\n\n.button-block {\r\n display: flex;\r\n justify-content: center;\r\n}\r\n.block-button-1 {\r\n text-align: center;\r\n border-radius: 35px;\r\n color: white;\r\n font-size: 21px;\r\n border: none;\r\n height: 75px;\r\n width: 330px;\r\n background-color: #4b9cdb;\r\n border-color: #bbdcff;\r\n box-shadow: 0px 0 15px #bbdcff;\r\n}\r\n\r\n.button-image {\r\n position: fixed;\r\n height: 30px;\r\n width: 30px;\r\n margin: 24px 0 0 -130px;\r\n animation: 2s ease infinite;\r\n}<div class="button-block">\r\n <img class="button-image" src="images/plane.png">\r\n <button class="block-button-1">\xd0\x97\xd0\xb0\xd0\xb1\xd1\x80\xd0\xbe\xd0\xbd\xd0\xb8\xd1\x80\xd0\xbe\xd0\xb2\xd0\xb0\xd1\x82\xd1\x8c \xd0\xbf\xd0\xbe\xd0\xbb\xd1\x91\xd1\x82</button>\r\n </div>