“顺风”提供了多个实用程序来控制哪些CSS属性的转换，其中有transition和transition-all。
我检查了这两个类的CSS属性，在这里它们的顺序是相同的。
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150m
浏览 5提问于2021-05-03得票数 2
回答已采纳
我刚刚意识到我们可以将我们想要的任何值放在transition-property CSS参数后面，因为我只是这样做的(不是故意的)。然后我去了，它们可以填充任何自定义值：
/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
/* Multiple values */
transition-property: test1, animation4;
transition-pro
浏览 0提问于2018-06-26得票数 0
回答已采纳
假设下面的React组件使用React Transition Group，我如何在组件加载时渲染过渡动画？
从‘React’导入react；从‘react- Transition -group’导入{ TransitionGroup，transition}；
const FeatureItem3 = class extends React.Component {
constructor() {
super();
this.state = {
animate: true,
};
}
render() {
return (
浏览 36提问于2018-08-21得票数 0
回答已采纳
1回答
我正在尝试模拟菜单的悬停链接效果，如本页所示：
我在我的页面上使用的代码是：
.x-navbar .desktop .x-nav>li {
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-
浏览 0提问于2015-11-19得票数 0
3回答
我在做基于颜色的过渡时遇到了一些问题...
我正在使用以下CSS：
.embtn {
position:absolute;
top:0vh ;
left: 0vw;
border-radius: 5vw;
padding: 0.2vw;
color: red;
width: calc(2vw + 1vh);
height: calc(2vw + 1vh);
background-color: white;
-webkit-transition: background-color 2s ;
-webki
浏览 0提问于2018-11-04得票数 0
1回答
正如您在中看到的，为元素设置:hover行为似乎会延迟其子元素识别其状态。
例如这个HTML，
<p>Here's some text.
<span>This will highlight later.</span>
Here's some more text.</p>
使用CSS：
p:hover{
color:#FE6
}
p,span{
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-moz-transition-property:all;
浏览 1提问于2011-11-29得票数 3
回答已采纳
1回答
CSS动画导航元素:悬停
、、、
我有一个标准的嵌套UL导航结构和一些CSS来动画的子导航在:hover上...
看看这个小提琴：
除了最深的UL上的动画之外，一切都像预期的那样工作。第一个子导航设置高度动画，第二个子导航仅设置宽度动画。
这是处理我遇到问题的最深UL的动画的代码。
nav ul li > ul > li > ul {
position: absolute;
display: block;
visibility: hidden;
width: 0px;
height: auto;
top: 0;
left: 100px;
padd
浏览 3提问于2013-05-11得票数 1
回答已采纳
1回答
获取css转换值
、、
我有这个CSS
#main .timer img.hand {
position: absolute;
left: 0;
bottom: 0;
transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);
transition: transform 1.25s ease-out 0s; -webkit-transitio
浏览 1提问于2013-01-17得票数 3
2回答
我的页面上有一个li元素，它是<li class="basket last items">。如果用户在该li上徘徊，则会显示另一个div，即<div class="articles">。我想推迟鼠标上div的消失。
我现在的css规则：
#headlinks li.basket div.articles {
padding:5px;
width:380px;
z-index:100;
position:absolute;
border:1px solid #405ade;
-webkit-t
浏览 5提问于2015-06-08得票数 1
回答已采纳
1回答
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
当div元素被动画/移动时，这会影响它的大小，但我也需要调整它的不透明度：
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0
浏览 1提问于2015-12-29得票数 0
回答已采纳
2回答
我想在链接悬停时显示一条虚线(平滑过渡)。我尝试了下面的方法，但没有成功。问题出在哪里？非常感谢，
请参阅
article p {
margin-bottom: 1.1em;
font-size: 16px;
}
article a:link, article a:visited {
text-decoration: none;
color: #9EB63C;
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
浏览 0提问于2014-11-30得票数 5
回答已采纳
由于某些原因，我无法使过渡工作。
应该有一个过渡，当你停留在任何一个部分。代码是存在的，但它只能在Chrome中工作。
我做错了什么吗？
这仅仅是在不起作用的过渡阶段。
-webkit-transition-property: translateY, skew;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: ease-in-out, ease;
-webkit-transition-delay: 0.02s;
-moz-transition-property: translateY
浏览 0提问于2013-12-23得票数 0
如何在css3中禁用“转换-定时-功能”效应？
我正在使用twitter引导手风琴效果。当我单击第一个选项卡时，项目从右到左。
有没有办法消除这种影响。
.collapsing{
position:relative;
height:0;
overflow:hidden;
-webkit-transition-timing-function:ease;
-o-transition-timing-function:ease;
transition-timing-function:ease;
-webkit-transition-duration:.35s;
-o-tran
浏览 1提问于2015-04-22得票数 1
回答已采纳
我在下面有这个Vue transition-group。它可以正常工作，但问题是，当循环中的任何元素更新时(hash更改，用于键)，转换组将触发该更新元素的动画(每次更新时)。
我需要它在将元素添加到items数组(元素是用items.unshift(newItem)添加的)时，只对元素进行一次动画处理。
<transition name="notification-transition">
<custom-component
v-for="item in items"
:key="'item-' +
浏览 1提问于2021-06-12得票数 0
使用这几行代码，我尝试向元素添加过渡： transition.style.transform = 'translateY(0)';
transition.style['-webkit-transition'] = 'opacity 0.9s ease-in-out';
setTimeout(() => {
type == 'showContainer' ? transition.style.opacity = 1 :
浏览 17提问于2021-11-16得票数 0
2回答
无法理解此CSS代码
、、、
我买了一个HTML/CSS模板。当我浏览CSS文件时，我看到这段代码让我很困惑。
.team-member .details, .team-member .details {
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.team
浏览 2提问于2015-04-23得票数 0
回答已采纳
2回答
我有一个问题，HTML元素正在移动，而动画，我已经捕获了2张图片来猜测我想要什么.
动画前：动画后：
我所想要的是，在“过渡”之后，元素就会留在他们的线上.
下面是一些HTML和CSS代码
HTML
<div id="sliderdiv">
<ul>
<li>
<div id="bullets">
<div class="bullet" id="bul1"></div>
<div class
浏览 7提问于2014-06-28得票数 0
回答已采纳
1回答
我的网站上的Css转换效果不适用于safari (在最新版本上测试)。另外，在Chrome、firefox和Opera中测试的其他浏览器中，过渡也运行得很好。
我的代码如下：
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.navbar-inverse ul a::before{
浏览 1提问于2016-12-15得票数 1
我的CSS文件中有以下代码，它全局打开锚元素上所有CSS属性的所有链接上的过渡：
a{
display:block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
稍后在CSS文件中，我想关闭特定链接(比如notrans类)上的转换，但仅限于background-position。类
浏览 0提问于2012-07-31得票数 1
回答已采纳
2回答
当发生以下转换时，图像会在一两秒钟内变得像素化。你知道为什么会发生这样的事吗？
#picture {
height: 96px;
width: 96px;
-webkit-transition: all 0.05s ease-out;
-moz-transition: all 0.05s ease-out;
-o-transition: all 0.05s ease-out;
transition: all 0.05s ease-out;
background-color: black;
}
#picture:hover {
height: 106px;
浏览 2提问于2016-11-13得票数 2
回答已采纳
2回答
我有个div。当我悬停在上面，它应该出现使用fadeIn效应，当我删除鼠标，然后它应该使用fadeOut效应。
我试过下面的代码。
.main_div{
width:100px;
height:100px;
border:thin black solid;
position:relative;
}
.main_div .overlay_div{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
display:none;
background:rgba(0,0,0,0.5);
op
浏览 3提问于2017-06-14得票数 4
回答已采纳
1回答
我试着激活我的弹出菜单。
我在屏幕外ul元素上有这个：
top: 40px; //hidden off bottom of page
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
在盘旋时：
bottom: 40px;
top: auto;
但这不是动画-为什么？
浏览 3提问于2015-04-13得票数 0
回答已采纳
我正在创建一个幻灯片，该幻灯片使用过渡对象来转换幻灯片：
function Transition(slide, settings){
this.slide = slide;
this.el = slide.el;
this.settings = settings;
this.duration = (this.settings['transitionSpeed'] / 1000) + 's';
this.endAnimation = null;
}
Transition.prototype.inRight = functi
浏览 0提问于2014-03-26得票数 5
回答已采纳
我正在使用Objective-C编写一个iPhone应用程序。
下面是Xcode给我的错误：
error: assignment of read-only variable 'prop.149'
代码：
// Create CATransition object
CATransition *transition = [CATransition animation];
// Animate over 3/4 of a second
transition.duration = 0.75;
// using the ease in/out timing function
transi
浏览 1提问于2009-07-22得票数 4
回答已采纳
1回答
我正在将一个矩形从图片中的a点移动到i点，我想为每个点标记一个5s的停止延迟(有8个点)。转换在下面的代码中工作得很好(延迟只适用于点b).The问题是我不能为其他转换添加更多的延迟。
有什么办法可以做到吗？
提前感谢大家。
function TRANSITION(access,dur=10000,Delay=5000,b=390.5,c=523,d=632.5,e=810.8,f=942.5,g=1063,h=1196,i=1334.5)
{
access.transition().duration(dur).attr('x&#
浏览 20提问于2017-01-29得票数 2
回答已采纳
2回答
根据caniuse.com的说法，对于那些同时支持CSS transition和CSS transform的浏览器，至少有三种不同的类型：
那些同时需要-webkit-前缀的transition和transform (例如Safari 6，Android < 4.4)。
那些只需要-webkit-前缀的transform (例如Chrome3x)。
不需要前缀的(如FF和IE10/11)。
我如何安全地编写我的transition样式，以便在每种类型中正确地解析它们？我认为有两种选择：
-webkit-transition: -webkit-transform 300
浏览 5提问于2013-12-18得票数 12
回答已采纳
1回答
所以我有一个从右边滑出来的汉堡菜单，我想把我的<div>滑开，以防止重叠(它们都有一个不透明度<1，所以看起来很奇怪)。
无论如何，当使用以下代码时，我将使用jQuery来更改left + right值，转换工作非常好
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
然而，我也在使用淡出动画的div正在被移动，并出于某种原因，这是触发。基本上，它闪烁，然后慢慢消失时，进入屏幕。所以，我想做以下几件事：
transition: left .3s ease-in-out;
-web
浏览 0提问于2017-12-18得票数 6
回答已采纳
我在查看react-transition-group库时，偶然发现了这个我以前从未见过的语法(第1行)。什么意思？
PS:我知道正常的道具或状态的解构；但在这种情况下，似乎有一个道具赋值给‘inProp’……提前感谢
const Fade = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[stat
浏览 0提问于2018-09-23得票数 0
2回答
我试着让我的网页有两个相同高度的栏，其中一个是图片，下面是一个小文本框，我的代码是：
<div class="third-column" style="height: 600px">
<div class="imageBox">
<img src="images/rikkertCC.jpg" alt="" >
</div>
<div cla
浏览 2提问于2014-04-03得票数 0
1回答
好奇是否有人能够更改jquery Isotope使用的CSS3转换，从而使用类似于"transition- delay : 0s，1s;“的东西来增加项的延迟。
我希望它们先向左移动，然后向下移动，以便在过滤时有更多的数学感觉(而不是默认的“对角随机移动”)。似乎对默认css3转换所做的任何更改都不起作用。
这是我目前的css：
/**** Isotope Animating ****/
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-tran
浏览 0提问于2012-03-01得票数 1
回答已采纳
我想改变悬停功能的背景颜色，但我想在慢动作中显示。此外，我在悬停时添加一些CSS属性，并希望删除和悬停。但是我的函数不能按照我的要求工作。
$(function (){
$('.box').hover(function (){
$('body').css({'background-color':'black'})
$(this).css('-moz-transition', 'opacity .3s')
$(this).c
浏览 0提问于2012-07-12得票数 0
回答已采纳
我对过渡有个问题。
我在左边的财产上有一个过渡。我想从左移动一个div :860 0px到-860 0px，而不需要转换，然后用转换将它移动到0px。
如果我移除给元素提供转换的类，那么应用一个给它提供-860‘s的类，这很好。没有过渡。
但是，由于我想在左转到0px之前对它应用一个转换，所以我再次添加转换类，并给它一个左: 0的类。当我在Chrome中这样做时，它就会在元素的途中将转换应用到-860 as位置以及0。所以不是我想要的。
我也想避免之间的耽搁。但我不认为Chrome在-860 at上重新呈现元素时，会有什么事件告诉我。有什么想法吗？
下面是一些示例代码。具有过渡的类：
.div
浏览 1提问于2016-07-24得票数 0
回答已采纳
我有一个UINavigationController，当用户按下按钮时，它的UIView会从屏幕底部滑入。
然而，在我将视图的“隐藏”属性设置为NO之后，UINavigationController的视图有时会在一帧中完全显示，就好像动画已经完成一样。
这是显示/隐藏视图的代码：
- (void)showGUI: (bool)show
{
CATransition *transition = [CATransition animation];
transition.duration = 0.5;
transition.timingFunction = [CAMediaTimingFunc
浏览 1提问于2011-01-06得票数 0
回答已采纳
Codepen：
<div class="container">
<div id="ease" class="move"><div>Ease (Default)</div></div>
<div id="linear" class="move"><div>Linear</div></div>
<div id="ease-in" class="move">
浏览 5提问于2022-06-25得票数 0
回答已采纳
5回答
因此，我将以下CSS转换附加到一个元素：
a {
-webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
transition:color 0.1s ease-in, background-color 0.1s ease
浏览 45提问于2011-07-09得票数 120
回答已采纳
1回答
当悬停一些文本来改变颜色时，我在CSS中使用了transition(0.3s)，但我也在Javascript中使用了transition来“翻译”文本。我现在的问题是，当我悬停它们时，它们不再使用CSS (0.3s)中的过渡，而是我在javascript中设置的过渡。我尝试使用element.style.transition = "translate 5.4s ease“，或者在css中为特定属性设置延迟，但在vain.How中，我只能为translate设置Js中的过渡吗？提前谢谢你
CSS
social-media-texts p {
position:relative;
浏览 14提问于2021-07-03得票数 0
1回答
有人知道如何在只读对象(如window或htmlelement.style )中重写属性和函数吗？
需要测试的示例函数：
public static getCSSTransitionEvent(element: HTMLElement): string {
let transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': &#
浏览 2提问于2017-03-30得票数 3
2回答
是我的JSFiddle。我想要做的是在两个无序列表之间产生转换效果。当你点击商店，它会带你到子菜单。当您单击子菜单上的shop时，它会将您带回主菜单。为什么它不滑倒或有任何影响？我的目标是将子菜单从右转到左，并使主菜单从左到右转换。我怎么才能把这事做好？
<div class="mobile-nav">
<ul class="main-mobile-menu transition">
<li class="has-submenu"><a href="#" title
浏览 0提问于2014-04-16得票数 0
回答已采纳
我在路由js文件中获取transition数据，如下所示：
beforeModel(transition) { console.log(transition) }
我想在我的控制器的一个函数中使用它，如下所示：
import Controller from '@ember/controller';
export default class ListingsController extends Controller {
get pageTitle() {
if (this.transition.targetName == 'foo')
浏览 2提问于2019-06-04得票数 1
1回答
我试着将代码与一些资源进行比较，包括我遵循的制作它的教程，但我的转换不起作用，它只是从开始状态跳到结束，没有动画。提前谢谢你。
HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
浏览 2提问于2012-04-20得票数 0
下面的代码在chrome中产生了预期的结果，即直接向所有元素添加transition-delay。
$('.front-nav .sub-menu').each(function() {
var transitionDelay = 50;
$(this).find('li').each(function( index ) {
var thisDelay = transitionDelay * index;
thisDelay = thisDelay + 'ms';
$(this).c
浏览 4提问于2015-07-08得票数 2
1回答
我有一个按钮，我想要动画。要实现这个动画，我想使用color和box-shadow.
问题是，这种转换只适用于一个，要么是color，要么是box-shadow.。
请看一看，这是一台.
-webkit-transition-property: box-shadow; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: ease-in-out;
-moz-transition-property: box-shadow; -moz-transition-duration: 0.1s; -m
浏览 3提问于2013-11-07得票数 0
回答已采纳
我一直在尝试在两个标识之间创建一个淡出效果。他们交换，但看起来不太好。有人能告诉我做这件事的最佳方法吗？
这是我的代码：
.header.affix .logo-second {
display: block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s eas
浏览 1提问于2016-04-29得票数 0
回答已采纳
我试着停止默认的转换，并转换为在Firefox和chrome中工作的flex-滑块，而不是IE。
#carousel-2 .slides {
margin-top: 14px;
-moz-transition: none;
-webkit-transition: none;
-o-transition:none;
transition: none !important;
-webkit-transform: translate3d(0px, 0px, 0px) !important;
-moz-transform: none impor
浏览 3提问于2013-07-09得票数 0
我有下面的javascript代码，在图像上动画覆盖。
我怎样才能使效果只是滑动，而不是旋转X？
jQuery(".portfolio-item .portfolio-media-wrapper.gdl-image").hover(function(){
if (jQuery.support.transition){
jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, rotateX: '180deg', duration: 0});
浏览 7提问于2014-04-08得票数 0
回答已采纳
1回答
棒棒糖的活性和片段转移
、、、、
我试图把我的注意力集中在新的Activity Transition框架( Lollipop )上。活动转换工作非常直接，并且有一些，但是Fragment Transition是没有文档的，我无法让它工作。我尝试过这个用例(在Android中很常见)：
案例1: ActA+FragA -> ActB+FragB
sharedElement是FragA和FragB中的图像。我没有想出工作代码，所以我后退了一步，试着
案例2: ActA+FragA -> ActB
sharedElement在FragA和ActB上。动画不能工作，我只能看到当我点击FragA上的图像时，图
浏览 3提问于2014-11-19得票数 8
我已经开始使用过渡来“现代化”网站的感觉。到目前为止，:hover转换运行良好。现在我想知道是否有可能基于其他事情触发转换，例如当类发生变化时。
下面是相关的CSS：
#myelem {
opacity: 0;
display: none;
transition: opacity 0.4s ease-in, display 0.4s step-end;
-ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
-moz-transition: opacity 0.4s ease-in, di
浏览 5提问于2012-12-02得票数 50
回答已采纳
1回答
我在学d3.js。在下面的脚本中，selection.transition()似乎在selection.property()被链接时不起作用，尽管当selection.property()放在transition().each().中时它工作。我做错了什么吗？或者，这是transition()的规范吗？
<input class="property_transition" type="checkbox">Property Transition Test</input><br>
<input class="prop
浏览 1提问于2015-06-02得票数 0
回答已采纳
1回答
我从element.eleme.io中提取折叠过渡进行测试。但是，代码不像预期的那样工作。调用了呈现函数，但未使用类转换提供的方法。尝试谷歌如何正确使用渲染功能，但没有多少信息。有人知道怎么解决这个问题吗？
collapse-tranisition.js
class Transition {
beforeEnter (el) {
el.classList.add('collapse-transition')
if (!el.dataset) el.dataset = {}
el.dataset.oldPaddingTop = el.styl
浏览 3提问于2017-05-11得票数 0
我已经创建了一个动画导航栏。
代码为：
#nav ul li a:hover{
color: #000033;
background-color:#bcbceb;
width: 200px;
border-radius: 0 1em 1em 0;
transition-property: width, color, background-color;
transition-duration: 0.5s, 0.5s, 0.5s;
transition-timing-function: linear, ease-in, ease
浏览 3提问于2012-12-10得票数 0
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
腾讯云开发者
