让一个动画一直执行的属性是_彻底了解CSS3帧动画

CSS3 中有一个 animation 属性,用它可以创建出帧动画。

animation 属性是下面几个属性的缩写:

  1. animation-name 动画的名字;
  2. animation-duration 动画执行时间;
  3. animation-timing-function 运行动画的函数;
  4. animation-delay 延迟多长时间才执行动画,默认是 0;
  5. animation-iteration-count 动画执行多少次,默认是 1 次;
  6. animation-direction 动画是否反向播放,默认是 normal;
  7. animation-fill-mode 动画在执行之前和之后如何将样式应用于其目标,默认是 none;
  8. animation-play-state 定义一个动画是否运行或者暂停,默认是 running,表示正在运行。

例如下面的代码:

.box{
    
    margin: 40px;
    height: 100px;
    width: 100px;
    /* 可以一次性指定多个帧动画,每个帧动画用逗号隔开 */
    animation: a1 2.4s infinite,
               a2 1s infinite;
}
@keyframes a1{
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
}
@keyframes a2{
    from {
        background-color: green;
    } to {
        background-color: gold;
    }
}

效果:

04cdb81d04bab2b570fd3d6fd608813c.gif

animation

animation-name

定义动画名字,它的值可以是:

  • none 表示无关键帧。这会使动画失效;
  • string 标识动画的字符串,大小写敏感,由字母、数字、_- 组成。

animation-name 可以指定多个值,每个用 , 隔开,多个值表明有多个帧动画。

animation-duration

动画执行时间,初始值是 0s。单位可以是秒(s) 或者毫秒(ms),没有单位,值无效。

可以指定多个值,这些值与 animation-name 的值相对应,如果少值,按初始值:0s。

例如:

.box{
    
    height: 100px;
    width: 100px;
    background-color: purple;
    animation-name: a1, a2;
    animation-duration: 1s, 3s;
}
@keyframes a1{
    from {
        background-color: purple;
    } to {
        background-color: gold;
    }
}
@keyframes a2{
    from {
        height: 100px;
        width: 100px;
    } to {
        height: 240px;
        width: 240px;
    }
}

效果如下:

9cfd30de1732999b67f99fe6eba9a322.gif

animation-duration

animation-timing-function

定义运行动画的函数,他有以下几种值:

  • linear 动画会以恒定的速度从初
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大学生参加学科竞赛有着诸多好处,不仅有助于个人综合素质的提升,还能为未来职业发展奠定良好基础。以下是一些分析: 首先,学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛,学生不仅能够深入学习相关专业知识,还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野,使其对专业领域有更深刻的理解。在竞赛过程中,学生通常需要解决实际问题,这锻炼了他们独立思考和解决问题的能力。 其次,学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成,这促使学生学会有效地与他人合作、协调分工。在团队合作中,学生们能够学到如何有效沟通、共同制定目标和分工合作,这对于日后进入职场具有重要意义。 此外,学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面,要求参赛者具备全面的素质。在竞赛过程中,学生不仅需要展现自己的专业知识,还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外,学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台,学生有机会展现自己在专业领域的优势,得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要,有助于他们更加积极主动地投入学习和未来的职业生涯。 最后,学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点,还可以为进入理想的工作岗位提供有力的支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值