css-transitions | 易学教程

Weird behavior when rotating an element on hover

阅读更多关于 Weird behavior when rotating an element on hover

Given these two examples. Using Hover div { position: absolute; width: 150px; height: 40px; background: orange; left: 50%; top: var(--top); transition: transform 2s; transform: translateX(-50%); text-align: center; line-height: 40px; font-size: 1.2em; } div:hover { transform: translateX(-50%) rotate(var(--deg)); } div:nth-child(1) { --deg: 180deg; --top: 20%; } div:nth-child(2) { --deg: -180deg; --top: 40%; } div:nth-child(3) { --deg: 360deg; --top: 60%; } <div>180deg</div> <div>-180deg</div> <div>360deg</div> Using Animation div { position: absolute; width: 150px; height: 40px; background:

Cubic bezier curves - get Y for given X

阅读更多关于 Cubic bezier curves - get Y for given X

问题 I have a cubic bezier curve where the first and last points are given (namely P0(0,0) and P3(1,1)). The other two points are defined like this: cubic-bezier(0.25, 0.1, 0.25, 1.0) (X1, Y1, X2, Y2, also those values must not be smaller or larger than 0 or 1, respectively) Now what would I have to do to get the Y coordinate for a given X, assuming there's only one? (I know that under certain circumstances there can be multiple values, but let's just put them aside. I'm not doing rocket science

CSS3 Transition: Different transition for IN and OUT (or returning from transitioned state)

阅读更多关于 CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)

问题 Original Question... updated working code below: I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition). What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so: Fade in: opacity from 0 to 1 in

Width transitioning from fixed size to “auto” using CSS without Javascript

阅读更多关于 Width transitioning from fixed size to “auto” using CSS without Javascript

I'm having a bit of a problem making script-less CSS-only animated transition of an element that's initially set to a fixed width and should expand on mouse over to auto width according to content in it. When mouse goes out it should collapse back to fixed width. Let's say I have a menu: <menu> <li>Item</li> <li>Item with long text</li> </menu> Initially it would display as a collapsed 50px wide vertical bar with icons only. When one mouses over it reveals icon labels. This is a simplified example of what I'm trying to achieve. First menu is the one that needs to transition and second one is

CSS Transition - Fade Element on Hover only

阅读更多关于 CSS Transition - Fade Element on Hover only

Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves. i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this: #myLink { opacity: 0; } #myLink:hover { opacity: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } And here's a jsFiddle to demonstrate: Fiddle Yes, just set the transition on the :hover rather than

css3 webkit animation stop on div:hover

阅读更多关于 css3 webkit animation stop on div:hover

问题 I try to make an animation with webkit-animation and @-webkit-keyframes. I have a div animated with child div inside. And i would stop the webkit-animation of the parent when my mouse is over a child. Any Examples ? Thanks 回答1: Unfortunately there is no parent selector in CSS, see here. You will have to use a bit of javascript to select the parent and tell it to pause. The pause declaration in CSS goes like this: -webkit-animation-play-state: paused | running; The javascript (jQuery, in this

CSS Keyframe animation breaks transition when both are applied on same property

阅读更多关于 CSS Keyframe animation breaks transition when both are applied on same property

I've got a strange behavior when adding a CSS animation on top of the transition for a progress bar element: the transition just stops executing. Not sure why I cannot have both, an initial animation and the transition when changing the element's width. The whole thing looks like this: HTML: <div class="container"> <div class="bar"></div> <div class="actions"> <button id="btnResize">Resize bar</button> </div> </div> CSS: .bar { height: 3px; width: 300px; background-color: blue; position: absolute; transition: margin-left 0.5s ease-in-out, width 0.5s ease-in-out; /*Transition breaks when I add

CSS transition on an initially hidden elemement

阅读更多关于 CSS transition on an initially hidden elemement

I would like to make a css transition on an element which has display: none set. Consider the following code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Transition From Hidden</title> <style type="text/css"> div { -webkit-transition-property: all; -webkit-transition-duration: 2s; } div.hidden { display: none; opacity: 0; } div.from { opacity: 0; } </style> <script type="text/javascript"> function loaded() { var e = document.getElementById("foo"); e.className = "from"; window.webkitRequestAnimationFrame(function(t) { e.className = null; }); } </script> </head> <body onload=

Rotating text with CSS3/HTML5

阅读更多关于 Rotating text with CSS3/HTML5

I have a <span> that I want to rotate. I am using HTML5, CSS3, and Internet Explorer 9. I tried the below CSS, but it's not working: -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); How do I rotate the span? -webkit- and -moz- properties are for webkit browsers (Chrome, Safari) and Gecko browsers (Firefox) respectively. You need to use the equivalent for IE as well. .rotate { /* Safari, Chrome */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Older versions

CSS3 Transition not working

阅读更多关于 CSS3 Transition not working

I couldn't get transitions to work on this page , anybody has any idea why? div.sicon a { transition: background 0.5s linear; -moz-transition: background 0.5s linear; /* Firefox 4 */ -webkit-transition: background 0.5s linear; /* Safari and Chrome */ -o-transition: background 0.5s linear; /* Opera */ -ms-transition: background 0.5s linear; /* Explorer 10 */ } Berker Yüceer Transition is more like an animation. div.sicon a { background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%); transition: background 0.5s linear; -moz-transition: background 0.5s linear; /* Firefox 4 */ -webkit