为了账号安全,请及时绑定邮箱和手机立即绑定

Animation

标签:
Html/CSS

说明:

复合属性,检索或设置对象所应用的特效属性。(如果是多组属性值,以逗号分割)

注意:如果只提供一个<' time'> 参数,则为 <' animation-duration '> 的值定义;如果提供二个<' time'> 参数,第二个为 <' animation-delay '> 的值定义。

语法:

animation个的取值、含义

webp

animation的属性

兼容性:

animation的兼容性

webp

兼容

动画:


        .main{ width: 400px; height: 400px;border:1px solid rgb(200, 200, 200); position: relative;}

        .yuan{ width: 40px; height: 40px; border-radius: 50%; background-color: rgb(243, 223, 8); margin: 20px auto 0;

            opacity: 1;animation: move 3s ease-out 1s forwards; transform: translate(80px);}

        @keyframes move{

            0%{opacity: 1;width:40px;height: 40px;transform: translate(0)}

            25%{opacity: 0.5;width: 30px;height: 30px;transform: translate(20px)}

            50%{opacity: 0;width: 20px;height: 20px;transform: translate(40px)}

            75%{opacity: 0.5;width: 30px;height: 30px;transform: translate(60px)}

            100%{opacity: 1;width: 40px;height: 40px;transform: translate(80px)}

        }



<div class="main"><div class="yuan"></div></div>





作者:超爱吃小龙虾
链接:https://www.jianshu.com/p/fdedb01aeb77


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消