css-animations 相关问题

CSS动画可以为从一种CSS样式配置到另一种CSS样式配置的转换设置动画。 CSS模块描述了作者使用关键帧随时间动画CSS属性值的方法。可以通过指定这些关键帧动画的持续时间，重复次数和重复行为来控制这些关键帧动画的行为。

在保持先前的旋转位置

transform-origin

javascript html css css-animations css-transitions

回答 1 投票 0

如何防止SVG元素溢出？我有一张非洲的SVG地图，我想在其中嵌入第二个SVG。但是，由于溢出问题，我无法这样做。我怀疑我可能会面临裁剪或掩盖问题。自...

javascript animation svg css-animations svg-animate

回答 1 投票 0

我正在尝试添加一个简单的动画，该动画的雪花在容器中从上到下掉落：这里链接：

import "./styles.css"; const seasonArray = ["winter", "summer", "autumn"]; const getSeasonValue = (season) => { switch (season) { case "winter": return winter; case "autumn": return autumn; case "summer": return summer; default: return summer; } }; const StyledButton = styled.button` border: 1px solid black; border-radius: 10px; padding: 5px; display: flex; justify-content: center; align-items: center; max-width: 33%; position: relative; min-width: 30%; height: 20%; `; const StyledButtonsWrapper = styled.div` display: flex; justify-content: space-between; height: 100vh; `; export default function App() { return ( <StyledButtonsWrapper> {seasonArray.map((season) => { return ( <StyledButton key={season} label={season}> <SnowFlakeIcon /> {season.charAt(0).toUpperCase()} {season.substring(1)} </StyledButton> ); })} </StyledButtonsWrapper> ); } const StyledSvg = styled.svg` position: absolute; top: 0; width: 100% height: 100%; animation: snowFlake 2s ease-in-out infinite; @keyframes snowFlake { 0% { transform: translateY(0); } 50% { transform:translateY(50%); } 100% { transform: translateY(100%); } } `; const SnowFlakeIcon = () => { return ( <StyledSvg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <path d="m10 20-1.25-2.5L6 18" fill="#88C9F9" /> <path d="M10 4 8.75 6.5 6 6" fill="#88C9F9" /> <path d="m14 20 1.25-2.5L18 18" fill="#88C9F9" /> <path d="m14 4 1.25 2.5L18 6" fill="#88C9F9" /> <path d="m17 21-3-6h-4" fill="#88C9F9" /> <path d="m17 3-3 6 1.5 3" fill="#88C9F9" /> <path d="M2 12h6.5L10 9" fill="#88C9F9" /> <path d="m20 10-1.5 2 1.5 2" fill="#88C9F9" /> <path d="M22 12h-6.5L14 15" fill="#88C9F9" /> <path d="m4 10 1.5 2L4 14" fill="#88C9F9" /> <path d="m7 21 3-6-1.5-3" fill="#88C9F9" /> <path d="m7 3 3 6h4" fill="#88C9F9" /> </StyledSvg> ); };

css reactjs css-animations styled-components

回答 1 投票 0

在CSS动画结束时修复最终状态

opacity: 0;

css css-animations

回答 5 投票 0

可以将nth-child值用作属性中的参数吗？（以及如何）

肖特描述（TL; dr;）是否有使用CSS属性内的n-Child值的“纯CSS”方式（不是/sass）？这样的事情： span.anim：nth-child（n）{animation-delay：...

css css-selectors css-animations

回答 2 投票 0

我正在尝试制作圆形线的流动/绘图动画。我有工作的解决方案，但不是我的最爱。我的目标是使该线路向下流动，然后在打开页面时向右流动。我尝试重新创建该动画的环境，以便任何能够帮助的人都有更好的主意。

css svg css-animations

回答 1 投票 0

角 - 移动线的无限动画

angular typescript css-animations

回答 1 投票 0

我如何重复使用密钥帧向后播放动画？

css css-animations

回答 0 投票 0

我将如何顺利地（仅在CSS中）下拉列表中使用滑动方法的元素？

html css css-animations css-transitions

回答 1 投票 0

有一种方法可以将一个圆从其中点扩展到左右？

我想创建这种效果，其中一个圆将同时扩展到左右。我在另一篇文章中看到了这个答案：

css animation sass tailwind-css css-animations

回答 1 投票 0

我如何阻止我的CSS动画刷新？我正在为CSS中的按钮制作一些悬停动画。我希望按钮在悬停和不叠加时进行平稳的过渡，但不能使用JS。我的动画效果很好，但是Uno ...

这里是我的悬停动画：

css animation css-animations

回答 1 投票 0

如何制作CSS剪贴显示背景背景，而仅在剪裁的部分中应用动画？

@keyframes expandCircle { 0% {clip-path: circle(0% at center);} 100% {clip-path: circle(100% at center);}} @keyframes melt { 0% { filter: blur(20px) contrast(400%) saturate(250%) brightness(125%); pointer-events: none;} 100% { filter: none; pointer-events: all;}} #screen-container { position: absolute; width: 100%; height: 100%; background-image: url("system/wallpaper/paint.bmp"); background-repeat: no-repeat; background-size: cover; background-color: #000000; animation: expandCircle 3s forwards; clip-path: inset(0 0 0 0 round 8px); /* contain the blur */ overflow: hidden; } #screen-container::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; clip-path: circle(0% at center); animation: melt 2s forwards; }

css animation css-animations clip clip-path

回答 1 投票 0

为Safari缺乏对SVGS的负值的支持工作我目前使用CSS潜入动画SVG，我准备说“ Screw Safari”，只是为这些用户上传静态SVG。但是，以为我之前把它放在世界上...

svg safari css-animations webkit

回答 1 投票 0

对HTML ID元素申请正确正确的CSS动画

javascript html css css-animations

回答 1 投票 0

如何在悬停并暂停悬停时播放动画

css css-animations

回答 5 投票 0

允许在CSS键帧动画中使用任何小数值？