标签: transition
上下移动背景图像
我有一个带有背景图像的 div。如何做到这一点：当你悬停在那个 div 上时，背景图像向上移动 5 像素，然后向下移动 5 像素？例如快起来，慢下来。
我的代码：
CSS
<style>
.place {
background:url(../img/place.png) no-repeat 6px 50%;
}
</style>
HTML
<div class="place">
123 Something Street<br/>
UB5 212 Liverpool
</div>
如何通过过渡做到这一点？还是jquery？
推荐指数
解决办法
查看次数
出现带有 css 过渡的 div 类？
所以...我在旋转木马的幻灯片内有三个 div 类。现在我有一个 display:none 用于普通元素，而 display:block 用于具有 .current 类的元素，如下所示：
p.readmore,.logo,.slidetxt{
display: none;
}
.current p.readmore, .current .logo, .current .slidetxt{
display: block;
}
它有效，但它只是“弹出”，我想淡化外观。我还有一个标题在当前时向下移动，我也想为该标题设置动画或淡出。
.current h1.carousel-title{
margin-top: 200px;
}
谢谢
推荐指数
解决办法
查看次数
javascript css3每2秒更改一次背景颜色
如何每2秒自动更改HTML背景颜色？HTML3与CSS3淡入还是淡出？
我试图使用转换与计时器和CSS目标没有任何成功
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
推荐指数
解决办法
查看次数
输入上的边框转换，就像在 MaterialUI 中一样
有谁知道如何像在 MaterialUI 中一样实现输入的边框过渡？
http://material-ui.com/#/components/inputs
我现在只做了一个底部边框，但不知道如何制作这样的底部边框幻灯片。不幸的是，还没有通过谷歌找到任何令人满意的东西。
推荐指数
解决办法
查看次数
如何在javafx中使用节点的宽度制作动画/过渡？
我想用节点的“宽度”制作动画。
在本例中，我的节点是“AnchorPane”。
我尝试在 javafx 中制作一个导航抽屉。
没有属性“width Property()”？
new Key Value (node.width Property (), 1, WEB_EASE)
node.widthProperty().getValue(） 未找到
我的代码：
public void changeWidth(final Node node, double width) {
this.node = node;
this.timeline = TimelineBuilder.create()
.keyFrames(
new KeyFrame(Duration.millis(20),
new KeyValue( going here? , width, WEB_EASE)
)
)
.build();
setCycleDuration(Duration.seconds(5));
setDelay(Duration.seconds(0));
}
“不透明度”属性的示例：
new KeyValue(node.opacityProperty(), 1, WEB_EASE)
我的类 ConfigAnimationViewPane：
public class ConfigAnimationViewPane extends Transition {
protected static final Interpolator WEB_EASE = Interpolator.EASE_BOTH;
protected AnchorPane node;
protected Timeline timeline;
private boolean oldCache = false; …推荐指数
解决办法
查看次数
D3：在转换中更改 html
在这个（损坏的）最小示例中，我希望文本淡出，在不可见时更改，并以更改后的内容重新出现。这应该很简单（没有交叉淡入淡出），但错误消息抱怨这.html不是一个函数。
<!DOCTYPE html>
<title>Image mask</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">
</script>
<body>
</body>
<script>
var textbox = d3.select('body').append('div');
textbox
.html('Click me.')
.style('cursor','pointer');
var i = 0;
textbox.on('click', function() {
i++;
textbox.transition()
.style('opacity', 0)
.transition().duration(300)
.html('Click me. <strong>' + i + '</strong>')
.transition().transition()
.style('opacity', 1);
});
</script>PS我找到了一个交叉淡入淡出的例子，但它似乎没有必要复杂（因为我不想交叉淡入淡出）并且需要版本4的.active方法。
更新。如果.html替换为.text，它“有效” ，但我确实需要解析内容。
推荐指数
解决办法
查看次数
将鼠标悬停在过渡 css 上
这个问题可能很明显，但我是 css 新手。
我正在动画一个形状，所以当你悬停它时，它会伸展。我已经通过一个很好的轻松过渡完成了悬停，但是当您离开鼠标时，过渡不起作用。有没有办法让它在悬停时刻也发生？
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
推荐指数
解决办法
查看次数
如何实现圆形悬停效果
如何实现如附图所示的圆形悬停效果（在右下图） 
这是相关的CSS：
.box_details {
float:left;
width:200px;
height:200px;
margin-right:35px;
background-color:#fff;
border-radius:3px;
box-shadow: 0px 6px 19px 16px rgba(239,242,245,1);
}
.box_details:hover {
background-color:#f4f6f8;
color:#939bc5;
}
推荐指数
解决办法
查看次数
如何使用 javascript（无 jQuery）动画滚动到页面顶部？
我想在按下网页按钮时执行转换以慢慢滚动回页面顶部。我知道如何使用类中的更改来执行转换，但在这种情况下，我该怎么做？
document.documentElement.scrollTop = 0;
推荐指数
解决办法
查看次数
在 Svelte 中使用 Await 进行转换
考虑这个苗条的代码
{#await}
<div class='loading'>
<p>LOADING LOGO ANIMATION</p>
</div>
{:then value}
<div class='loaded'>
<p>Main site content</p>
</div>
我想从加载“等待”部分到加载所有内容时添加过渡或动画。我希望加载部分淡出，只有当加载的内容完全淡出时才会淡入。有什么想法吗？可以这样做吗？
推荐指数
解决办法
查看次数