html - No Css transition possible -
I'm trying to make a good transition for my button. I tested the mode used on a red div, it works! But this will not happen on my button
I think that is probably due to nested elements, but no test solution works.
div.container {max-width: 240px; Width: Auto; Border: 1px solid # cd8102; Boundary-radius: 3px; Height: 36px; Background: Linear shield (# fcbf00, # f39600); / * Standard syntax * / font-family: 'PT senses', non-serif; Art color; Font-size: 16px; Text-decoration: None; Text align: center; / * Safari 3.1 to 6.0 * / -bbkit-transition: background 1s linear 0s; / * Safari 3.1 to 6.0 * for transition: background 1s linear 0s; } Div.container: hover {background: linear-shield (yellow, # f39600); / * Standard syntax * / width: 300px; } Div.innerContainer {width: 90%; Margin-left: auto; Margin-right: auto; Display: Inline-block; Width: Auto; / * Default value * /} div.box1 {box-size: border-box; Width: 207; Max-width: 207px; / * Range: 1px solid red; * Swimming / Left; Height: 36px; Text align: center; Padding-right: 6px; Padding-left: 10px; } Div.box2 {box-size: border-box; Width: 20px; Height: 20px; Margin-top: 8px; Text align: center; Swim left; Justification: center; / * Horizontal align * / align-item: center; / * Align vertical * /} #TextInTheMiddle {text-align: center; Exhibit: Flex; Justification: center; / * Horizontal align * / align-item: center; / * Align vertical * / height: 36px; } & lt; A href = "http://www.google.de" type = "submit" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "innerContainer" & gt; & Lt; Div class = "box1" & gt; & Lt; Span id = 'text in the middle' & gt; Langer Text Malt Anas Allen Fried & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = "box 2" & gt; & Lt; Span & gt; IIMID = "IMG" src = "file: /// y | / button / dimension / ICNS / NXTPNP" height = "20" width = "20" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div style = "clear: both;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / A & gt; Do you have any ideas to solve the problem?
Thank you! The problem is that background image can not be animated; And the CSS Gradient is actually a browser rendered picture. You can copy your background position or copy it to Adiation using Opacity Here is an article on animating gradients:
For a list of unknown properties,
Comments
Post a Comment