我正在学习 CSS 动画。
尝试操纵每个动画的缩放量。
我需要图像比现在放大更少(不慢),然后返回到缩小状态。
在下面的哪些 CSS 属性上,我可以控制放大和缩小的大小?
我想要这样一种场景,它只放大到足以勉强超出框架范围,然后立即退出。
.wrapper {
width: 300px;
height: 300px;
border: 2px solid black;
margin: 50px auto 50px auto;
overflow: hidden;
}
.frame {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
background-image: url('http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc');
-webkit-animation: zoomeffect 10s infinite;
-moz-animation: zoomeffect 10s infinite;
animation: zoomeffect 10s infinite;
}
@-webkit-keyframes zoomeffect {
0% {
background-position: center;
transform: scale(1, 1);
}
50% {
background-position: center;
transform: scale(2, 2);
}
100% {
background-position: center;
transform: scale(1, 1);
}
}
@keyframes zoomeffect {
0% {
background-position: center;
transform: scale(1, 1);
}
50% {
background-position: center;
transform: scale(2, 2);
}
100% {
background-position: center;
transform: scale(1, 1);
}
}
<div class="wrapper">
<div class="frame">
</div>
</div>
最佳答案
您可以通过在两个 @keyframes
类中使用 50% 代码来更改放大的程度,我将其更改为 1.5。尝试 1.0 - 2.0 之间的值以获得所需的缩放量。
50%{ 背景位置:中心; 变换:比例(1.2,1.2);
.wrapper{
width:300px;
height:300px;
border:2px solid black;
margin:50px auto 50px auto;
overflow:hidden;
}
.frame{
height:100%;
width:100%;
background-position:center;
background-size:cover;
background-image: url('http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc');
-webkit-animation: zoomeffect 10s infinite;
-moz-animation: zoomeffect 10s infinite;
animation: zoomeffect 10s infinite;
}
@-webkit-keyframes zoomeffect{
0%{
background-position:center;
transform:scale(1,1);
}
50%{
background-position:center;
transform:scale(1.5,1.5);
}
100%{
background-position:center;
transform:scale(1,1);
}
}
@keyframes zoomeffect{
0%{
background-position:center;
transform:scale(1,1);
}
50%{
background-position:center;
transform:scale(1.5,1.5);
}
100%{
background-position:center;
transform:scale(1,1);
}
}
<div class="wrapper">
<div class="frame">
</div>
</div>
关于html - 控制动画比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48712365/