GVKun编程网logo

使用CSS3过渡在固定元素中滑动（css3滚动过渡效果）

9

想了解使用CSS3过渡在固定元素中滑动的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于css3滚动过渡效果的相关问题，此外，我们还将为您介绍关于css3如何实现过渡动画的效果？css3过渡效

想了解使用CSS3过渡在固定元素中滑动的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于css3滚动过渡效果的相关问题，此外，我们还将为您介绍关于css3如何实现过渡动画的效果？css3过渡效果的实现方法、css3过渡、CSS3过渡 – 淡出效果、CSS3过渡-淡出效果的新知识。

本文目录一览：

使用CSS3过渡在固定元素中滑动（css3滚动过渡效果）

使用CSS3过渡在固定元素中滑动（css3滚动过渡效果）

我有一个固定位置和自动宽度(必须有自动宽度)的元素应该从左侧滑入.

我为它定义了两种状态：隐藏和可见.当可见时,它应该位于窗口的左侧,当隐藏时它应该在视图之外.

可见状态

left: 0;
/* right: auto; */

隐藏的状态

right: 100%;
/* left: -element auto width */

当转换是静态的而没有任何动画时,这两个状态都显示正常.

备选方案1：CSS3转换

我也尝试过使用CSS3转换,但是我害怕跨浏览器的差异.当不支持转换时,转换将自动回退到静态更改,但如果我使用CSS3转换,则不会直接回退.必须明确定义.

这是使用CSS3过渡和变换的效果的working demo.如您所见,左侧栏的宽度尽可能宽,当进入隐藏状态时,它会滑到左侧边缘之外.

备选方案2：折叠元件宽度

这可以通过操纵元素宽度(同时也使用最大/最小宽度来支持自动宽度)来完成,但问题是内容不会移动.很明显,元素宽度正在被操纵.
我们必须移动元素,包括其内容.

题

有没有办法避免CSS3转换同时满足以下规则：

>宽度必须是自动的
>当可见时,它位于左窗口边缘
>当隐藏它时,它位于左边缘之外

解决方法

您需要将元素包装到另一个div中：

HTML

<div id="wrapper">
    <div id="element">
        Lorem ipsum dolor sit.
        <br />
        Lorem ipsum dolor sit amet.
        <br />
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Quae explicabo!
    </div>
</div>

并且#element在left之间转换：0％和left：-100％.

实例：http://codepen.io/anon/pen/vgzcI

css3如何实现过渡动画的效果？css3过渡效果的实现方法

css3如何实现过渡动画的效果？css3过渡效果的实现方法

有时候我们在网页中可能会看到这样的效果，当鼠标放到某些文字或图像上的时候会发生一些变化，这其实就是过渡，这么说来比较抽象，那么，下面就来介绍一下关于css3实现过渡的动画效果。

css3实现过渡是离不开transition属性的，transition是网页上的过渡动画，变化的逐渐过渡效果，简称过渡动画。

那么，接下来就来看看css3的transition属性具体怎么实现过渡效果。

首先我们来看一看transition属性的定义和用法：

transition 属性是一个简写属性，用于设置四个过渡属性。

立即学习“前端免费学习笔记（深入）”；

transition-property：规定设置过渡效果的 CSS 属性的名称。

transition-duration：规定完成过渡效果需要多少秒或毫秒。

transition-timing-function：规定速度效果的速度曲线。

transition-delay：定义过渡效果何时开始。

在看完了简单介绍的transition属性定义和用法之后。

现在我们具体来看一个css3实现过渡效果的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小效果</title>
    <style type="text/css">
        /*通配符重置浏览器默认的两个值，
        对本文没有太大影响，不知道可以无视*/
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 400px;
            height: 100px;
            padding-top: 20px;
            line-height: 100px;
            margin:200px auto 0;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            font-family: "华文行楷";
            background: #000;
            color:#F60;
    transition-property: all;/*变化的东西。all是所有*/
    transition-duration: 1s;/*变化过程的时间*/
    transition-timing-function: linear;/*linear是匀速变化*/
    transition-delay: 0s;/*没有延迟变化*/
    /*下面的是简写属性*/
    /*
        transition:all 1s linear 0s;
    */
        }
        .div1:hover{
            text-shadow: 0px 0px 2px #fff,
                    0px -3px 3px #1EB,
                    0px -6px 4px #01DEFD,
                    0px -9px 5px #0BF,
                    0px -12px 6px #08F;
        }
    </style>
</head>
<body>
    <div>PHP中文网火焰字</div>
</body>
</html>
登录后复制

最后我们来看一下css3实现过渡的效果：

css3实现过渡效果过程：

2345截图20180912113609.png

css3实现过渡效果结果：

2345截图20180912113700.png

关于transition属性更多用法可以参考css3学习手册。

相关推荐：

使用 CSS3 动画实现的 3D 图片过渡特效_html/css_WEB-ITnose

关于CSS3使用transition属性实现过渡效果

以上就是css3如何实现过渡动画的效果？css3过渡效果的实现方法的详细内容，更多请关注php中文网其它相关文章！

css3过渡

css3过渡

css过渡
css过渡为一种状态到另外一种状态的变换

transition 过渡

transition 为一个简写属性，是一个transition-property （定义过渡的属性的名称）以及 transition-duration （定义过渡属性的所需动画的时间）和 transition-timing-function （描述中间值如何计算的） 以及 transition-delay （描述过渡效果开始作用之前需要等待的时间）

transition-property

transition-property 定义过渡属性的名称
即指定引用过渡属性的名称

例如要对width属性应用过渡动画，则其该属性的值为width。规定的属性动画值有在这 https://developer.mozilla.org... 该列表列出来的属性为可动画的属性。

此处输入图片的描述

其css如下

div {
    width:300px;
    height:400px;
    background:#698771;
}
div:hover {
    background:#ededed;
    transition-property:background;
}

html 如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>form表单</title>
</head>
<body>
    <div></div>
    <script src="./index.js"></script>
</body>
</html>

由于没有设置过渡的时间，所以效果不大

transition-duration

transition-duration这是一个过渡时间的设置。
设置过渡的时间为3s
此处输入图片的描述
非常明显出现过渡的效果
下面是css

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:background;
    transition-duration:3s;
}
div:hover {
    background:#ededed;
    transition-property:background;
    transition-duration:3s;
}

下面是html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>form表单</title>
</head>
<body>
    <div></div>
    <script src="./index.js"></script>
</body>
</html>

transition-timing-function

该属性用于描述属性的中间值。即该两个状态变化的过渡曲线

single-transition-timing-function （一个过渡函数 ）

其取值是一个三次方的贝塞尔曲线的值。填入一个三个值，根据贝塞尔曲线
参考 https://zh.wikipedia.org/wiki...
http://www.html-js.com/articl...
在adobe系列的软件中ai，ps等都应有了贝塞尔曲线，css中也有贝塞尔曲函数。
获取一些常见的贝塞尔曲线
github https://github.com/ai/easings...
https://easings.net/zh-cn
根据这个选择一些常见的贝塞尔曲线。
除了贝塞尔曲线以外还有一些其他的函数，依次说明

贝塞尔曲线

一个栗子

选择一个贝塞尔曲线
此处输入图片的描述

然后html如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>form表单</title>
</head>
<body>
    <div></div>
    <script src="./index.js"></script>
</body>
</html>

其css如下

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
    trasition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
div:hover {
    width:100%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

其效果如下
此处输入图片的描述

大概解释一下

cubic-bezier为一个时序功能的类，该类有四个参数。分别有四个点，对应于三次方的贝塞尔曲线。
此处输入图片的描述
p0和p1为起点和终点，其中p0和p1两个值都是固定的分别为(0,0)和(1， 1)这是两个起始值和终止值，其中传入该参数的为p1和p2的值，（p1和p2的值只能在[0,1]的范围内，否则css将会忽视该属性的值）

阶跃函数 / 赫维赛德函数 / Step function

steps()定义了一个阶跃函数
定义，如果实数域上的某个函数可以用半开区间上的指示函数的有限的线性组合表示，其为阶跃函数

即，阶跃函数为有限段的分段常数函数的 组合

参考; https://en.wikipedia.org/wiki...

举栗子

steps(2, start)
此处输入图片的描述

start(4, end)
此处输入图片的描述

start 表示左连续函数 在动画开始时发生第一步
end 表示右连续函数 在动画结束时发生最后一步 为默认值

同样的该函数仅仅在[0, 1]区间内
此处输入图片的描述

css

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:100%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: steps(5, end);
}

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>form表单</title>
</head>
<body>
    <div></div>
    <script src="./index.js"></script>
</body>
</html>

帧函数

https://www.w3.org/TR/css-tim...
同理根据名字可知为一帧一帧的
此处输入图片的描述

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:100%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: frames(10);
}

由于是草案，暂时不可用

一些定义的关键字

linner

一个一次函数，经过原点恒定的速率运动
此处输入图片的描述

ease

此处输入图片的描述
动画开始缓慢，急剧加速，然后逐渐减慢

ease-in

此处输入图片的描述
动画开始缓慢，然后逐渐加速直到结束，此时它突然停止。

ease-in-out

动画开始缓慢，加速，然后减速到最后。
此处输入图片的描述

ease-out

此处输入图片的描述
动画突然开始，然后逐渐减慢到最后。

step-start

动画会立即跳转到最终状态，直到结束。
此处输入图片的描述

step-end

动画保持其初始状态直到结束，此时它直接跳转到最终状态。
此处输入图片的描述

transition-delay

规定过渡效果开始作用之前需要等待的时间。
此处输入图片的描述

css如下

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:80%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition-delay: 2s;
}

过渡总写

此处输入图片的描述

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:80%;
    background:#e8e899;
    transform:width 2s cubic-bezier(0.95, 0.05, 0.795, 0.035) .5s, background 6s cubic-bezier(0.95, 0.05, 0.795, 0.035) 5s;
}

CSS3过渡 – 淡出效果

CSS3过渡 – 淡出效果

我试图在纯css中实现“淡出”效果.这是 fiddle
我确实在线查看了几个解决方案.但是在阅读了 documentation online之后

我试图弄清楚为什么幻灯片动画不起作用.有什么指针吗？

这是HTML

<div>
    <div>Saved</div>
</div>

CSS

.dummy-wrap {
    animation: slideup 2s;
    -moz-animation: slideup 2s;
    -webkit-animation: slideup 2s;
    -o-animation: slideup 2s;
}
.success-wrap {
    width: 75px;
    min-height: 20px;
    clear: both;
    margin-top: 10px;
}
.successfully-saved {
    color: #FFFFFF;
    font-size: 20px;
    padding: 15px 40px;
    margin-bottom: 20px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #00b953;
}
@keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-moz-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-webkit-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}
@-o-keyframes slideup {
    0% {
        top:0px;
    }
    75% {
        top:0px;
    }
    100% {
        top:-20px;
    }
}

解决方法

您可以使用转换： 
.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

CSS3过渡-淡出效果

CSS3过渡-淡出效果

我正在尝试在纯CSS中实现“淡出”效果。我确实在网上研究了几种解决方案，但是，在在线阅读文档后，我试图弄清为什么幻灯片动画不起作用。有指针吗？

.dummy-wrap {  animation: slideup 2s;  -moz-animation: slideup 2s;  -webkit-animation: slideup 2s;  -o-animation: slideup 2s;}.success-wrap {  width: 75px;  min-height: 20px;  clear: both;  margin-top: 10px;}.successfully-saved {  color: #FFFFFF;  font-size: 20px;  padding: 15px 40px;  margin-bottom: 20px;  text-align: center;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  background-color: #00b953;}@keyframes slideup {  0% {    top: 0px;  }  75% {    top: 0px;  }  100% {    top: -20px;  }}@-moz-keyframes slideup {  0% {    top: 0px;  }  75% {    top: 0px;  }  100% {    top: -20px;  }}@-webkit-keyframes slideup {  0% {    top: 0px;  }  75% {    top: 0px;  }  100% {    top: -20px;  }}@-o-keyframes slideup {  0% {    top: 0px;  }  75% {    top: 0px;  }  100% {    top: -20px;  }}<div>  <div>Saved</div></div>

答案1

小编典典

您可以改用转换：

.successfully-saved.hide-opacity{    opacity: 0;}.successfully-saved {    color: #FFFFFF;    text-align: center;    -webkit-transition: opacity 3s ease-in-out;    -moz-transition: opacity 3s ease-in-out;    -ms-transition: opacity 3s ease-in-out;    -o-transition: opacity 3s ease-in-out;     opacity: 1;}

今天的关于使用CSS3过渡在固定元素中滑动和css3滚动过渡效果的分享已经结束，谢谢您的关注，如果想了解更多关于css3如何实现过渡动画的效果？css3过渡效果的实现方法、css3过渡、CSS3过渡 – 淡出效果、CSS3过渡-淡出效果的相关知识，请在本站进行查询。

本文标签：

上一篇css – 如何在没有最小高度,粘性页脚或javascript的情况下将包含的页脚保留在短页面的底部

下一篇如何将列添加到大型SQL Server表（sql添加列数据从其它表中）

相关文章