css3 animation

最新推荐文章于 2023-04-02 22:57:46 发布
最新推荐文章于 2023-04-02 22:57:46 发布
阅读量213 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014798510/article/details/53033162
版权

1、animation-name：@keyframes的名称 : ani
这里写图片描述
2、animation-duration：time 表示动画运行时间 1s
这里写图片描述
3、animation-timing-function: linear|ease|ease-in|ease_out|ease-in-out;
动画效果：
linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
这里写图片描述
4、animation-delay: time; 动画延迟time时间后开始
这里写图片描述
5、animation-iteration-count: n|infinite; 循环n次或者infinite无限的运动
这里写图片描述
循环4次
6、animation-direction: normal|alternate;
normal：只往前运动；alternate：左右交替
这里写图片描述

总结：
animation: name duration timing-function delay iteration-count direction;
@keyframes名称：ani,动画运行时间:1s,动画效果:ease-in,动画延迟:3s,动画循环:4次 ,alternate:左右交替
这里写图片描述

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes random{
           0% {
                    -webkit- transform: translate3d(0,30px,0);
                     transform: translate3d(0,30px,0);
          }
          30% {
            -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
          }
          100%{
            -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
          }
        }
        @-webkit-keyframes random{
           0% {
                    -webkit- transform: translate3d(0,30px,0);
                     transform: translate3d(0,30px,0);
          }
          30% {
            -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
          }
          100%{
            -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
          }
        }
        .jconfirm{
            width: 300px;
            height: 200px;
            border: 1px solid #f00;
            -webkit-animation:random 2s ease-in-out infinite;
            animation: random 2s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <div class="jconfirm" id="jconfirm"></div>
</body>
</html>

效果：
这里写图片描述

往地上就是一躺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 animation 详解
ZiXiaweb的博客
10-19 1315
animation介绍 animation的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。 transition 包括以下属性： transition-property: all; 如果希望所有的属性都发生过渡，就使用all。 transition-duration: 1s; 过渡的持续时间。 transition-timing-function: linear; 运动曲线。属性值可以是： linear 线性 ease 减速
css3 animation酷炫的文字动画特效
11-04
css3 animation酷炫的文字动画特效 css3 animation酷炫的文字动画特效
CSS3 Animation
Fayeni的博客
08-09 2416
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性Animation的学习，单从Animation字面上的意思，我们就知道是“动画”的意思。但CSS3中的Animation与HTML...
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
CSS3 animation 动画用法介绍
保持清醒
12-30 7776
一、css3 动画是什么 css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。 二、css3的动画属性 三、animation 介绍 animation主要包含六个属性，具体含义如下： （一）、keyframe 在介绍animation具体使用之前，要先介绍keyframe。 @keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。 要使
CSS3 animation介绍
houzhyan-博客
05-24 2127
上一篇transition过渡属性通过让属性在时间段内根据贝塞尔曲线平滑过渡，呈现出动画效果，但毕竟功能有限。本篇介绍的animation属性和传统的动画制作一样，能控制帧的每一步，制作出更强大的动画效果。和其他CSS3属性类似，animation包含很多子属性，我们一起看看：animation-nameanimation-durationanimation-timing-functionanim...
CSS3 animation（动画）属性详解
qq_40891322的博客
11-19 1242
CSS3 animation（动画）属性详解 1.语法 简写为：animation: name duration timing-function delay iteration-count direction fill-mode; @keyframes 规定 @keyframes 动画的名称。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规
css3 animation (动画) 属性
博客
07-02 794
值 说明 animation-name 动画名称 animation-duration 动画总时长 animation-timing-function 设置动画速度 animation-delay 设置动画延时 animation-iteration-count 设置动画播放次数 animation-direction 是否轮流反向播放动画 animation-fill-mode 当动画不播放时（动画完成或动画有延时为播放时），要应用这个样式 animation-play
CSS3 animation 实现跑马灯效果
weixin_49054076的博客
04-02 553
利用animation属性实现跑马灯效果
css3 animation实现动态波浪
wzp20092009的博客
11-20 1044
首先效果如图 animation 属性是一个用于设置css动画的简写属性。 <style type="text/css"> .wave{ width:100px; height:100px; border-radius: 100px; background:#06c no-repeat center center; ...
css3 animation 实现点绕圈 转圈效果
weixin_53898445的博客
11-23 1123
关键：转的不是点 是点所在的div（此div与圆重叠且宽高相等）
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图效果，需要的朋友参考下吧
CSS3 Animation文字动画特效
06-24
CSS3 Animation文字动画特效里面包含7款不同效果的文字动画特效。
CSS3中Animation属性的使用详解
09-24
CSS3的Animation属性是网页设计中用于创建动态效果的强大工具，它允许开发者精确地控制元素在动画过程中的各个阶段的行为。Animation属性结合了关键帧（Keyframes）的概念，使得动画的控制更为细腻，超越了简单过渡...
CSS3 简写animation
09-25
关键贞的动画效果如果一样，可以将关键贞的百分比用逗号隔开，然后再写效果
C#读取WinCC实时和归档数据
06-21
如何在 C#应用程序中读取 WinCC 变量归档数据，资源来自西门子官网
解放鼠标右键 chrome edge 浏览器 插件
06-21
解放鼠标右键 chrome edge 浏览器 插件 开启开发者模式,拖入扩展管理即可使用
Python实战示例自动办公-20 Python文本数据可视化之“词云”图.zip
06-21
自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图
Pygments-0.11-py2.5.egg
最新发布
06-21
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值