CSS动画示例(上一篇是CSS过渡…)

简介: CSS动画示例(上一篇是CSS过渡…)


CSS3使用动画分为两个步骤:

1.通过类似flash动画的关键帧来声明一个动画。

2.在animation属性中调用关键帧声明的动画,实现一个更为复杂的动画效果。

接下来我们具体来看看CSS3是如何实现动画的?

01

设置关键帧

在CSS3中,把@keyfreams成为关键帧,这个关键帧可以设置多段属性,其语法为:

@keyfreams name{
       from{//CSS代码}
       percentage{//CSS 代码}
       to{//CSS 代码}
}

也可以将from、percentage和to换成百分比,如下:

@keyfreams name{
       0%{//CSS代码}
       50%{//CSS 代码}
       100%{//CSS 代码}
}

语法解析:

name:动画的名称,通过该名称来调用该动画

percentage(50%):是一个百分比,主要用来定义某个时段的动画效果。

下面我们来看一段代码:

Html代码:

<div style="background: darkgoldenrod;" id="div7">

CSS样式代码:

/*声明一个动画*/
      @keyframes name{
        0%{
          width: 200px;
          height: 200px;
          background: yellow;
        }
        50%{
          width: 400px;
          height: 400px;
          background: green;
        }
        75%{
          width: 500px;
          background: black;
        }
        100%{
          width:600px ;
          height: 600px;
          background: cornflowerblue;
        }
      }

02

调用动画

@keyfreams只是用来声明动画效果的,但是如果不调用它的话,它就不会起什么效果,下面我们来看看怎么通过animation来调用动画。

语法:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

语法好长,下面来解释一下吧。

animation-name:调用的动画名称

animation-duration animation-timing-function animation-delay:分别是过渡时间,过渡方式,延迟时间。

animation-iteration-count:动画的播放次数,可以是整数,如果是infine的话,则是无限循环。

animation-direction:动画播放的方向,normal表示向前播放,alternate表示一前一后(播放次数偶数向前播放,奇数则反方向播放)。

animation-play-state:动画的播放状态,running和paused.

下面我们来看看调用动画的代码:

#div7:hover{
        animation:name 1s infinite alternate ease-in-out;
      }

效果如图所示:


目录
相关文章
|
5天前
|
XML 前端开发 数据格式
css示例
【4月更文挑战第23天】css示例
14 2
|
3天前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
10 2
|
3天前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
4天前
|
Web App开发 前端开发 iOS开发
CSS3 转换,深入理解Flutter动画原理,前端基础图形
CSS3 转换,深入理解Flutter动画原理,前端基础图形
|
5天前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
|
5天前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
5天前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
|
5天前
|
前端开发 JavaScript UED
绚丽多彩的网页世界:深入探讨CSS动画的艺术与技巧
绚丽多彩的网页世界:深入探讨CSS动画的艺术与技巧
21 3
|
5天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0
|
5天前
|
前端开发 JavaScript UED
《CSS 简易速速上手小册》第5章:CSS 动画与过渡(2024 最新版)
《CSS 简易速速上手小册》第5章:CSS 动画与过渡(2024 最新版)
30 1