css div平移淡入淡出

最新推荐文章于 2021-11-15 23:04:33 发布

weixin_30302609

最新推荐文章于 2021-11-15 23:04:33 发布

阅读量493

点赞数 2

原文链接：http://www.cnblogs.com/junyi-bk/p/10523557.html

版权

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */

/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
}

@keyframes mymove /* 对应animation-name，里面为执行的动画*/
{
from {left:200px;}/*执行动画的初始位置*/
to {left:0px;}/*动画结束位置*/
0% {
opacity: 0.1; /*初始状态 透明度为10%*/
}
50% {
opacity: 0.5; /*中间状态 透明度为50%*/
}
100% {
opacity: 1; /*结尾状态 不透明*/
}
}

@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
{
from {left:200px;}/*执行动画的初始位置*/
to {left:0px;}/*动画结束位置*/
}
</style>
</head>
<body>

<div></div>


</body>
</html>

转载于:https://www.cnblogs.com/junyi-bk/p/10523557.html

weixin_30302609

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css div平移淡入淡出

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation-name:mymove;animation-duration:5s;/* 5s表示执行动画...
复制链接

扫一扫