我有一个CSS动画,我正在网站上使用它来回移动箭头动画。在IE之外的所有浏览器上,它都可以正常工作,但IE出现了奇怪的故障,箭头的Y位置发生了变化,即使它不应该出现。
response = urllib.request.urlopen(url)
return response.read()
def parse(html):
soup = BeautifulSoup(html, 'lxml')
table = soup.find('span', class_='pull-right col-xs-1')
rows = table.find('fg-download-menu')
print(table.prettify())
def main():
parse(get_html('https://fred.stlouisfed.org/series/A191RI1A225NBEA#0'))
if __name__ == '__main__':
main()
$(function() {
$('button').click(function(e) {
e.preventDefault();
$('img.next').addClass('animated');
});
});
.arrow-cont {
height:100%;
width:130px;
position:absolute;
right:0;
top:0;
cursor:pointer;
overflow:hidden;
}
img.next {
width:30px;
position:absolute;
top:50%;
right:20px;
animation-duration:1.5s;
animation-timing-function:ease-in-out;
transition:0.5s all ease-in-out;
}
img.next.animated {
animation-name:next;
animation-iteration-count:infinite;
}
@keyframes next {
from { transform:translate(0px, -50%); }
65% { transform:translate(10px, -50%); }
to { transform:translate(0px, -50%); }
}
答案 0 :(得分:0)
尝试分别设置translateX
和translateY
属性。
此外,我不确定您为什么设置transition:0.5s all ease-in-out
,因为没有任何转换。所以我删除了这个。
$(function() {
$('button').click(function(e) {
e.preventDefault();
$('img.next').addClass('animated');
});
});
.arrow-cont {
height: 100%;
width: 130px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
overflow: hidden;
}
img.next {
width: 30px;
position: absolute;
top: 50%;
right: 20px;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
transform: translateY(-50%) translateX(0px);
}
img.next.animated {
animation-name: next;
animation-iteration-count: infinite;
}
@keyframes next {
from {
transform: translateY(-50%) translateX(0px);
}
65% {
transform: translateY(-50%) translateX(10px);
}
to {
transform: translateY(-50%) translateX(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow-cont">
<img class="next" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Arrow_Blue_Right_001.svg/768px-Arrow_Blue_Right_001.svg.png" />
</div>
<button>Animate</button>
答案 1 :(得分:-1)