css动画

最新推荐文章于 2024-11-04 14:35:19 发布

四月_h

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量67

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_46389242/article/details/129161644

版权

该文章介绍了如何通过CSS为页面中的类名为.circle的元素添加动画。通过定义@keyframes规则，创建名为run的动画，使元素在0%到100%的时间内沿着Y轴平移，产生上下移动的效果。animation属性设置了动画的持续时间、缓动函数、重复次数和方向。

摘要由CSDN通过智能技术生成

给页面元素添加动画

.circle {   //为页面中元素的类名
    animation: run 3s ease-in-out 0s infinite alternate;
}

@keyframes run {   //和animation中的名字一致
    0% {
        transform: translateY(-6%);
    }
    100% {
        transform: translateY(6%);
        -webkit-transform: translateY(6%);
        -moz-transform: translateY(6%);
        -ms-transform: translateY(6%);
        -o-transform: translateY(6%);
    }
}