侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css3animation讲解

2024-05-09 星期四 / 0 评论 / 0 点赞 / 9 阅读 / 1452 字

语法讲解animation: name duration timing-function delay iteration-count direction;animation-name规定需要绑定到选择

语法讲解

animation: name duration timing-function delay iteration-count direction;animation-name	规定需要绑定到选择器的 keyframe 名称。。animation-duration	规定完成动画所花费的时间,以秒或毫秒计。animation-timing-function	规定动画的速度曲线。animation-delay	规定在动画开始之前的延迟。animation-iteration-count	规定动画应该播放的次数。animation-direction	规定是否应该轮流反向播放动画。来源: http://www.w3school.com.cn/cssref/pr_animation.asp

定义动画

@keyframes myMove {    0%{        opacity: 0;    }    25%{        opacity: 0.5;    }    50%{        opacity: 1;    }    75%{        opacity: 0.5;    }    100%{        opacity: 0;    }}/*位移动画*/@keyframes lTor1 {    from{left: -100px}    to{left: 135px}}

引用动画

.myMove{    animation: myMove 2s ease-in-out;    animation-iteration-count:1;}.lTor1{    position: absolute;    animation: lTor1 2s ease-in-out;    animation-iteration-count:1;    left: 135px;}<body>    <p class="myMove">渐显渐隐</p>    <p class="lTor1">位移动画</p></body>

动画结束后如何让元素停在最后一帧,而不是回到原始状态在动画样式后面加上需要的样式就可以,因为样式是从前往后执行的

广告 广告

评论区