Question

我刚开始从here学习CSS过渡。但代码不起作用。我正在Ubuntu上的Firefox上执行。

的index.html：

<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="image1">
<img  src="image.jpg" height="150" width="150" />
</div>
</body>
</html>

的style.css：

#image1 {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

我只获得图像而不是过渡。另外，如何在单击按钮上运行转换？

Answer 1

根据定义，单词＆＃34; transition＆＃34;意味着将状态从一个变为另一个。因此，只有在更改某些CSS属性后才会运行CSS转换。例如，您可以使用:hover伪类或更改类名更改鼠标悬停时的某些样式。例如：

＆＃13;

var image = document.getElementById('image1');

document.querySelector('button').onclick = function() {
    image.className = image.className === 'active' ? '' : 'active';
};

＆＃13;

#image1 {
    border: 4px #DDD solid;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#image1:hover,
#image1.active:hover {
    border-color: purple;
    border-width: 4px;
}

#image1.active {
    border-color: coral;
}

＆＃13;

<img src="http://lorempixel.com/100/100" id="image1" height="150" width="150" />

<button>Run</button>

＆＃13;

备注

1）。您不需要为转换定义供应商前缀，因为support已经相当不错了。

2）。当然，您可以在转换规则中使用all关键字来定义要设置动画的特定属性：

#image1 { opacity: 0.5; transition: opacity 1s ease-in-out; } #image1:hover { opacity: 1; }

3）。在MDN了解更多关于CSS Transitions的内容。

Answer 2

确保更改css值，否则无法进行动画处理。您可以将图像的值放在：hover选择器下，如下所示：

＆＃13;

#image1 {
width:20px;
height:20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#image1:hover {
width:200px;
height:200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img  src="image.jpg" height="150" width="150" id="image1"/>
</body>
</html>

＆＃13;

有关动画和一些良好做法的更多信息，请访问W3Scools.com。

CSS Transition无效

2 个答案: