CSS3动画属性

最新推荐文章于 2022-03-10 13:15:41 发布
最新推荐文章于 2022-03-10 13:15:41 发布
阅读量239 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44567226/article/details/117984036
版权

CSS3提供的Transition动画
transition动画可以控制HTML组件的某个属性发生改变时会经历一段时间、以平滑渐变的方式，因而产生了动画效果
建议使用浏览器前缀
transition-property 指定对HTML元素的哪个CSS属性进行平滑渐变处理。该属性可以指定
background-color、width、height等各种标准的CSS属性
transition-duration 指定属性平滑渐变的持续时间。
transition-timing-function 指定渐变的速度。支持如下几个值。
ease 动画开始时较慢，然后速度加快，到达最大速度后再减慢速度
linear 线性速度。动画开始时的速度到结束时的速度保持不变
ease-in 开始时较慢，然后加快
ease-out 开始很快，然后减慢
ease-in-out 动画开始时速度较慢，然后加快，到达最大速度后再减慢速度
cubic-bezier(x1,y1,x2,y2) 通过贝济埃曲线来控制动画速度，每个值不超过1.0
贝济埃曲线

实际上，该属性值完全可以代替上面5个属性值,
上面五个属性值都只是cubic-bezier的应用
ease 相当于cubic-bezier(0.25,0.1,0.25,1.0)
linear 相当于cubic-bezier(0,0,1.0,1.0)
ease-in 相当于cubic-bezier(0.42,0,1.0,1.0)
ease-out 相当于cubic-bezier(0,0,0.58,1.0)
ease-in-out 相当于cubic-bezier(0.42,0,0.58,1.0)
transition-delay 指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变

CSS3提供的Animation动画
这种动画允许开发者定义多个关键帧，浏览器将会负责计算、插入关键帧之间的虚拟动画帧
建议添加浏览器厂商前缀
animation-name 指定动画名称。该属性指定一个已有的关键帧定义
animation-duration 指定动画的持续时间
animation-timing-function 指定动画的变化速度
animation-delay 指定动画延迟多长时间才开始执行
animation-iteration-count 指定动画的循环执行次数，设置为infinite属性值则永远重复
animation 复合属性，可以同时设置上面5个属性，该属性值的设置顺序就是上面属性的顺序

小例子：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
<meta http-equiv="expires" content="width=device-width" />
<title>变形与动画相关属性</title>
<style>
        #Transitions .BackgroundHover {
            width:400px;
            height:50px;
            border:1px solid black;
            background-color:cyan;
            padding:10px;
            transition: background-color 0.3s linear;
        }
        #Transitions .BackgroundHover:hover {
            background-color: yellow;
        }
        #imgTarget {
            height: 400px;
            width: 400px;
            border:1px solid black;
            top:0px;
            left:55%;
        }
        #target {
            top: 0;
            left: 0;
            position:sticky;
            border: 2px solid black;
            transition: left 0.3s linear,top 0.3s linear,border 0.3s linear;
        }
        #CubicBezier .Border {
            width: 300px;
            height: 400px;
            border: 1px solid black;
        }
        #CubicBezier .Border div {
            height: 50px;
            width: 10px;
            -webkit-transition-delay: 2s;
        }
        #CubicBezier input{
            width:20px;
        }
        @keyframes fkjava {
            0% {left: 100px; }
            40%{left:150px; }
            60%{left:75px; }
            100%{left:100px; }
        }
        #Animation div{
            background-color:gray;
            border:1px solid black;
            position:absolute;
            left:100px;
            width:60px;
            height:60px;
        }
        #Animation div {
            animation-name: fkjava;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        @keyframes Complex {
            0% {
                transform: rotate(0deg);
                background-color: #f00;
            }
            25% {
                transform: rotate(90deg) scale(1.5);
                background-color: #ff0;
            }
            50% {
                transform: rotate(180deg) scale(2);
                background-color: #f0f;
            }
            75% {
                transform: rotate(270deg) scale(1.5);
                background-color: #00f;
            }
            100% {
                transform: rotate(360deg);
                background-color: #f00;
            }
        }
        #Complex div {
            background-color: gray;
            border: 1px solid black;
            position: sticky;
            left: 160px;
            top:120px;
            width: 60px;
            height: 60px;
        }
        #Complex div {
            animation-name: Complex;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        a:link{text-decoration:none}
        #fisheye a{
            display:inline-block;
            text-align:center;
            width:120px;
            background-color:#eee;
        }
        @keyframes fisheye{
            0%{
                transform:scale(1);
                background-color:#eee;
            }
            40% {
                transform: scale(1.015);
                background-color: #bbb;
            }
            100% {
                transform: scale(1);
                background-color: #eee;
            }
        }
        #fisheye a{
            animation-name:fisheye;
            animation-duration:3s;
            animation-iteration-count:infinite;
        }
    </style>
</head>
<body>
    <h2>Transition动画</h2>
    <div id="Transitions">
        <div class="BackgroundHover">鼠标悬停到该元素背景颜色渐变</div>
    </div>
    <h2>多个属性同时渐变</h2>
    <div id="imgTarget">
        <img id="target" src=" " alt="Img" />
    </div>
    <h2>指定动画速度</h2>
    <div id="CubicBezier">
        <div class="Border">
            <div id="div1" style="background-color:aqua;transition:width 3s ease;"></div>
            <div id="div2" style="background-color:darksalmon;transition:width 3s linear;"></div>
            <div id="div3" style="background-color:gold;transition:width 3s ease-in;"></div>
            <div id="div4" style="background-color:salmon;transition:width 3s ease-out;"></div>
            <div id="div5" style="background-color:paleturquoise;transition:width 3s ease-in-out;"></div>
            <div id="div6" style="background-color:paleturquoise;transition:width 3s cubic-bezier(0.05,0.5,0.9,1.0);"></div>
        </div><br />
        <button onclick="ease()">ease</button>
        <button onclick="linear()">linear</button>
        <button onclick="easeIn()">ease-in</button>
        <button onclick="easeOut()">ease-out</button>
        <button onclick="easeInOut()">ease-in-out</button>
        <button onclick="custom()">自定义</button>
        <button onclick="All()">一键</button><br />
    </div>
    <h2>Animation动画</h2>
    <div id="Animation" style="height:200px;">
        <div>Animation动画</div>
    </div>
    <h2>同时改变多个属性的动画</h2>
    <div id="Complex" style="height:200px;">
        <div>改变多个属性的动画</div>
    </div>
    <h2>鱼眼效果</h2>
    <div id="fisheye" style="height:200px;background-color:#eee;">
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </div>
    <!--多属性渐变-->
    <script type="text/javascript">
        var target = document.getElementById("target");
        var imgTarget = document.getElementById("imgTarget");
        imgTarget.onmousedown = function (evt) {
            target.style.left = evt.clientX + "px";
            target.style.top = evt.clientY + "px";
        }

    </script>

    <!--指定动画速度-->
    <script type="text/javascript">
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        var div4 = document.getElementById("div4");
        var div5 = document.getElementById("div5");
        var div6 = document.getElementById("div6");
        function ease() {
            if (div1.style.width == "" || div1.style.width == "10px") {
                div1.style.width = 300 + "px";
            } else {
                div1.style.width = 10 + "px";
            }
        }
        function linear() {
            if (div2.style.width == "" || div2.style.width == "10px") {
                div2.style.width = 300 + "px"
            } else {
                div2.style.width = 10 + "px"
            }
        }
        function easeIn() {
            if (div3.style.width == "" || div3.style.width == "10px") {
                div3.style.width = 300 + "px"
            } else {
                div3.style.width = 10 + "px"
            }
        }
        function easeOut() {
            if (div4.style.width == "" || div4.style.width == "10px") {
                div4.style.width = 300 + "px"
            } else {
                div4.style.width = 10 + "px"
            }
        }
        function easeInOut() {
            if (div5.style.width == "" || div5.style.width == "10px") {
                div5.style.width = 300 + "px"
            } else {
                div5.style.width = 10 + "px"
            }
        }
        function custom() {
            if (div6.style.width == "" || div6.style.width == "10px") {
                div6.style.width = 300 + "px"
            } else {
                div6.style.width = 10 + "px"
            }
        }
        function All() {
            ease();
            linear();
            easeIn();
            easeOut();
            easeInOut();
            custom();
        }
    </script></body>
</html>
山顶洞人95277
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 animation的各个属性
github_36758028的博客
11-21 1111
“@keyframes”关键帧：自定义一些动画名称，规定什么时间做什么动作。即“@keyframes”后面跟着动画名称加上一对花括号“{...}”,花括号中是不同时间段样式。 例如       @keyframes changecolor {            0%{       background : red;     }        100%{
CSS3动画属性边框属性等
11-22
CSS3 动画属性（Animation） CSS 边框属性（Border 和 Outline） CSS 背景属性（Background） Color 属性 Box 属性 CSS 尺寸属性（Dimension） 内容生成（Generated Content） 可伸缩框属性（Flexible Box） Grid ...
animation动画复合属性
学习笔记
06-19 1360
css3中的animation动画复合属性：name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停) ...
animation的属性值
qq_46397904的博客
03-07 203
动画属性 ：animation animation vs transition 相同点：都是随着时间改变元素的属性值。 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 初始效果——最终的效果之间的变化； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达...
animation属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
cristina_song的博客
04-28 7731
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>贝塞尔曲线动画调研</title> <style> html { background: #ad4e24...
CSS3 三次贝塞尔曲线(cubic-bezier)
weixin_45842655的博客
12-18 1347
最近在看animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。 CS...
纯CSS3动画属性按钮控制焦点图滑动切换效果
11-17
在本文中，我们将深入探讨如何使用纯CSS3动画属性来创建一个由按钮控制的焦点图滑动切换效果。这种效果可以广泛应用于网站设计，为用户提供交互性和视觉吸引力。首先，让我们了解一下CSS3的关键概念和相关属性。 **...
使用CSS3的动画属性.ppt
07-02
使用CSS3的动画属性.ppt
modernizr框架制作html5 CSS3动画属性8种瀑布流
10-17
然后，我们来看CSS3的动画属性。包括但不限于`transition`, `animation`, `keyframes`等。`transition`允许我们在两个样式之间平滑过渡，而`animation`结合`@keyframes`规则，可以创建复杂的自定义动画。在这个项目...
css3 加载动画
09-14
2. 动画属性（animation）：结合@keyframes，我们可以使用以下CSS3动画属性来控制动画行为： - `animation-name`: 指定要应用的动画名称，对应于@keyframes的定义。 - `animation-duration`: 定义动画的总时长。 ...
css3 animation属性和使用方法
十年树人的博客
10-14 1695
css3 animation属性 将动画与元素绑定。 animation需要配合@keyframes使用。可以添加的参数有以下几种： animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direc...
css3 animation 和animate.css
金健的博客
02-28 1577
最近在看一些关于css3动画的文章，主要是css3 animation和animate.css。二者的区别css3 animation是css3的样式属性，它有animation-name（动画名）、animation-duration（持续时间）、animation-timing-function（播放方式）、animation-delay（开始时间）、animation-iteration-co
【前端Talkking】CSS系列-一步一步带你认识animation动画效果
weixin_33713350的博客
01-06 199
0、写在前面 在CSS系列——一步一步带你认识transition过渡效果这篇文章中，我给大家详细讲解了transition过渡的用法，能够实现比较友好的过渡效果，但是功能比较有限，如果要想实现比较漂亮的动画效果，就需要我们今天要请出主角animation登场了。首先，我们来看看animation的属性： 属性 描述 css @...
css3动画animation基础详解,给元素添加多个动画时动画不分先后同时执行
weixin_44011751的博客
07-21 5705
效果如图: 上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D基础动画</title> <style> html{ height: 100%;
css3动画animation-timing-function中的cubic-bezier(n,n,n,n)
wuling129的专栏
04-08 4154
transition-timing-function属性指定切换效果的速度。 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); cubic-bezier即为贝兹曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,...
CSS3 动画animation
Jana Jing的分享
03-10 493
animation也是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性 animation-name: 动画名称(默认值为none) animation-duration: 持续时间(默认值为0) an
CSS 过度中ease与ease-in-out的区别（ease曲线）
热门推荐
u011143548的博客
05-13 1万+
问题： 最近在学CSS中的过渡动画，有一个疑问：就是ease和ease-in-out，描述都是两头快中间慢。我想着TM不是重复了么。有啥区别啊？？？ 于是就开始网上各种搜他们的区别。发现还是有其他同学在问这个问题。但是找了好大一圈看到的内容大多数都是下面这样。可以说是毫无收获。 最后想找一下曲线，看看曲线估计就能知道两者的区别了，结果找了一大圈都没找到。浪费一下午时间，最终终于黄天不负苦心人让我找到了。 linear： 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1
css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况
web_xyk的专栏
04-21 1万+
    当大家开始做css3动画的时候，了解贝塞尔曲线就成了不可或缺的。“贝赛尔曲线”是由法国数学家Pierre Bézier所发明，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。这里主要说贝塞尔曲线在css3中的运用，三次方公式，四个点确定    三阶贝塞尔曲线由四个点确定，那么css3的贝塞尔函数cubic-bezier(x1,y1,x2,y2)只有两...
vue中显示和隐藏如何做动画_vue实现动画和css3动画属性
最新发布
05-16
除了使用 Vue 提供的 `transition` 组件外，还可以使用 CSS3 动画属性来实现动画效果，如 `animation` 和 `transition`。具体使用方式和上面的示例类似，只需要在样式中定义对应的动画效果。例如： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值