标签: css-animations
通过过渡调整文本区域大小是滞后的
当我设置了过渡textarea并且想通过右下角的调整大小手柄调整其大小时，调整大小会很滞后。
您可以在这个简单的示例中看到：
textarea{
outline : none;
border: 3px solid black;
resize: vertical;
-webkit-transition:all ease-in-out 0.7s;
-moz-transition:all ease-in-out 0.7s;
-ms-transition:all ease-in-out 0.7s;
-o-transition:all ease-in-out 0.7s;
transition:all ease-in-out 0.7s;
}
textarea:focus{
border-color: red;
}<textarea>Resize me by my resize handle please</textarea>如果没有过渡，调整大小是平滑的，但我希望有过渡来改变边框颜色。
我考虑过不使用过渡textarea并使用动画，如下所示：
textarea{
outline : none;
border: 3px solid black;
resize: vertical;
}
textarea:focus{
animation: animate 0.7s linear forwards;
}
@keyframes animate {
100% {
border-color: red;
}
}<textarea>Resize me by my resize handle please</textarea>正如您所看到的，我部分地解决了动画问题，但在焦点上我没有过渡。 …
2
推荐指数
推荐指数
1
解决办法
解决办法
1455
查看次数
查看次数
使用图像标签加载 svg 时，从悬停开始的 Svg 动画不会播放
我有以下动画：
如果您单击该链接，您将看到将其悬停后它就开始播放。
但是，当我使用图像标签在页面上加载 svg 时，如下所示，悬停事件似乎没有到达 svg 图像。
有可能以某种方式做到这一点吗？不能直接将 svg 粘贴到 html 页面中，因为我使用的软件不允许这样做。
2
推荐指数
推荐指数
1
解决办法
解决办法
812
查看次数
查看次数
CSS：仅一个动画的动画延迟
我目前有 3 个动画，我这样称呼它们：
animation: 225ms radius-in forwards,
75ms opacity-in forwards,
150ms opacity-out;
有没有一种方法，使用纯CSS，延迟“不透明度出”动画，直到半径入动画完成？
提前致谢！
2
推荐指数
推荐指数
1
解决办法
解决办法
1271
查看次数
查看次数
CSS3 动画在 Angular 组件内不起作用
我一生都无法弄清楚为什么这没有触发，因为这是一件相当简单的事情。我有一个 Angular 组件，仅包含以下内容：
<a href="#services">Click</a>
在相应组件的CSS中，我有这样的：
@keyframes bounce{
0% { transform: translateY(0px); }
50% { transform: translateY(5px); }
100% { transform: translateY(0px); }
}
a{
font-size: 3rem;
margin: 0 auto;
text-decoration: none;
transition: all 0.2s;
animation: bounce 1.5s infinite;
}
使用 Chrome 开发工具，我可以看到它在样式标签中输出以下内容：
@-webkit-keyframes bounce{
0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
50% { -webkit-transform: translateY(5px); …2
推荐指数
推荐指数
1
解决办法
解决办法
4209
查看次数
查看次数
关键帧 - 渐变背景没有动画
我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化，但没有动画。
#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}
@keyframes background-gradient {
0% {background: radial-gradient(circle at …2
推荐指数
推荐指数
1
解决办法
解决办法
3545
查看次数
查看次数
css动画如何使用“反向”进行悬停和退出事件？
鉴于此代码（http://jsfiddle.net/bzf1mkx5/）
.intern {
-webkit-animation: in 1s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 1s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to { -webkit-transform: scale(1.2);}
}<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>为什么没有动画？错误在哪里？
编辑：通过使用两个独立的动画，它确实可以工作，但是拥有反向属性 有什么意义呢？
.intern {
-webkit-animation: in2 1s 1 reverse forwards;
}
.intern:hover {
-webkit-animation: in 1s 1 normal forwards;
}
@-webkit-keyframes in {
from { -webkit-transform: scale(1); }
to …2
推荐指数
推荐指数
1
解决办法
解决办法
3434
查看次数
查看次数
如何在 React 中使用样式化组件来获取关键帧动画
我是 React 新手，特别尝试使用样式组件和关键帧。
我正在尝试让主页标题 h1 滑入。
我遵循了一些文档，但我觉得缺少一些东西或者我的东西不正常。
这是代码：
//Home.js
import React from "react";
import styled, { keyframes } from 'styled-components';
const Heading = keyframes`
0% { top: -3.125em; }
100% { top: 3em;
`;
const home = styled.div`
min-height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
`;
const homeHeader = styled.div`
h1 {
font-weight: lighter;
animation: Heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
// Animation
animation: ${Heading}
animation-duration: 3s;
animation-fill-mode: forwards;
`;
export const Home …2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
是否可以使用CSS translateX(100%) 制作移动动画？
在我的动画中，我喜欢使用变换。这也可以用财产来实现left/right。但我喜欢使用变换。我需要将freeze-loading-bar100% 向右移动，它应该是一个无限循环。
我怎样才能将其
loading-bar向右移动100%/完全？
*,
*::before,
*::after {
box-sizing: border-box;
}
.app-view {
height: 200px;
max-width: 300px;
margin: 1rem auto;
background-color: #fff;
box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.freeze-loading {
position: relative;
width: 100%;
height: 5px;
box-shadow: inset 1px 0px 4px 0 #ddd;
/** disual purpose **/
/** overflow: hidden; **/
}
.freeze-loading-bar {
position: absolute;
left: 0;
width: 80px;
height: …2
推荐指数
推荐指数
1
解决办法
解决办法
2018
查看次数
查看次数
使用图像和动画渐变背景遮盖 div
我目前正在设计一个具有动画渐变背景的徽标。
要求：
- 遮罩图像必须是 jpg 或 png
- 被屏蔽的元素最好是
<div> - 渐变应该是 CSS 并且最好来自
<div>背景
面具应该看起来像这样：
我已经关闭了 CSS 动画，但是当涉及到<div>从 jpg 或 png 图像中剪切形状时，我似乎陷入了困境。
我想出了什么：
我不喜欢我当前的解决方案，因为它依赖于 SVG 动画，并且我屏蔽了 SVG<rect>元素而不是<div>. 如果主要使用 CSS 来实现，那么灵活性要低得多。但是，它完成了工作。
<!-- image masked gradient -->
<svg height="200px" width="200px">
<defs>
<!-- the gradient for the rectangle element-->
<linearGradient id='gradient1'>
<stop stop-color='#020024'/>
<stop offset='.35' stop-color='#090979'/>
<stop offset='1' stop-color='#6699ff'/>
</linearGradient>
<!-- the mask shape of a thunder bolt -->
<mask id="image-mask" x="0" y="0" width="100" height="100" >
<image href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU8cEP-xBjtmZ2ZhpNKMc0dwE7I5a-PB8RBA&usqp=CAU" …2
推荐指数
推荐指数
1
解决办法
解决办法
1160
查看次数
查看次数
使用成帧器运动在状态变化时发出动画反应组件
我在使用成帧器运动使动画工作时遇到一些问题。任何帮助将不胜感激。
2
推荐指数
推荐指数
1
解决办法
解决办法
6968
查看次数
查看次数
标签 统计
css-animations ×10
css ×8
html ×3
keyframe ×2
reactjs ×2
svg ×2
angular ×1
css-mask ×1
javascript ×1