css3动画

简介: css3动画

CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

实例:当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变

<style>
div
{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
  -o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
</style>
<div></div>


相关文章
|
5天前
|
移动开发 JavaScript 前端开发
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
这篇文章展示了如何使用纯CSS3、原生JavaScript以及Vue 3.0技术来实现序列帧动画效果,并通过代码示例和动画效果展示了每种方法的实现过程和最终效果。
12 0
|
20天前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
|
1月前
|
前端开发
css 实现一笔画动画(如签名、手写、手绘等)
css 实现一笔画动画(如签名、手写、手绘等)
39 8
|
1月前
|
前端开发
css动画(仿微信聊天页面)
css动画(仿微信聊天页面)
|
1月前
|
前端开发 JavaScript
纯css动画 —— 展开、收起
纯css动画 —— 展开、收起
66 2
|
1月前
|
前端开发
css特效动画——页面加载中 ...
css特效动画——页面加载中 ...
15 1
|
1月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
24 2
|
1月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
29 1
|
1月前
|
前端开发 开发者
通过实践来提升CSS动画技能是非常重要的
【7月更文挑战第1天】通过实践来提升CSS动画技能是非常重要的
23 1
|
1月前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
22 1