CSS3动画使用方法实例

最新推荐文章于 2021-06-07 16:43:57 发布

技术空间

最新推荐文章于 2021-06-07 16:43:57 发布

阅读量619

点赞数 1

分类专栏： CSS 文章标签： css3 动画 css

本文链接：https://blog.csdn.net/m0_37290635/article/details/55668508

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:go 1s infinite;
    -moz-animation:go 1s infinite; /* Firefox */
    -webkit-animation:go 1s infinite; /* Safari and Chrome */
    -o-animation:go 1s infinite; /* Opera */
    animation-direction: alternate;
}
@keyframes go{
    0% {left:0px;}
    100% {left:200px;}
}
@-moz-keyframes go /* Firefox */
{
    0% {left:0px;}
    100% {left:200px;}
}
@-webkit-keyframes go /* Safari and Chrome */
{
    0% {left:0px;}
    100% {left:200px;}
}
@-o-keyframes go /* Opera */
{
    0% {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

优惠劵

技术空间

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画使用方法实例

html>head>style> div{ width:100px; height:100px; background:red; position:relative; animation:go 1s infinite; -moz-animation:go 1s infinite; /* Firefox */ -webkit-anima
复制链接

扫一扫