Databases
StackOverflow2013
Postsdbo
POtiming the animation in css3
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtiming the animation in css3
    primarykey
    data
    text
    <p>I have the following code: html: </p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="StyleSheet.css"&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;What&lt;/title&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body dir="rtl"&gt; &lt;div id="page"&gt; &lt;div id="bothcontainer"&gt; &lt;div id="littlebox1" class="littlebox1sentence"&gt;put your mouse here&lt;/div&gt; &lt;div id="littlebox1" class="triangle"&gt; &lt;div class="triangleborder"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="box1"&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and the CSS3:</p> <pre><code>#page { width: 900px; padding: 0px; margin: 0 auto; direction: rtl; position: relative; } #box1 { position: relative; width: 500px; border: 1px solid black; box-shadow: -3px 8px 34px #808080; border-radius: 20px; box-shadow: -8px 5px 5px #888888; right: 300px; top: 250px; text-align: justify; -webkit-transition: all 1s; font-size: large; color: Black; padding: 10px; background: #D0D0D0; opacity: 0; } @-webkit-keyframes myFirst { 0% { right: 300px; top: 160px; background: #D0D0D0; opacity: 0; } 100% { background: #909090; right: 300px; top: 200px; opacity: 1; } } #littlebox1 { top: 200px; position: absolute; display: inline-block; } .littlebox1sentence { font-size: large; padding-bottom: 15px; padding-top: 15px; padding-left: 25px; padding-right: 10px; background: #D0D0D0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; -webkit-transition: background .25s ease-in-out; border-bottom: 2px solid red; border-right: 2px solid red; border-top: 2px solid red; -webkit-transition-property:color, background; -webkit-transition-duration: .25s, .25s; -webkit-transition-timing-function: linear, ease-in; } #bothcontainer:hover ~ #box1 { -webkit-transition: all 0s; background: #909090; right: 300px; top: 200px; -webkit-animation: myFirst .75s; -webkit-animation-fill-mode: initial; opacity: 1; } #bothcontainer:hover .littlebox1sentence { background: #909090; color:#D0D0D0 } #bothcontainer:hover .triangle { border-right: 20px solid #909090; } .triangle { position: relative; width: 0; height: 0; border-right: 20px solid #D0D0D0; border-top: 26px solid transparent; border-bottom: 25px solid transparent; right: 186px; -webkit-transition: border-right .25s ease-in-out; margin-top: 2px; } .triangleborder { position: absolute; width: 0; height: 0; border-right: 22px solid red; border-top: 28.5px solid transparent; border-bottom: 27.5px solid transparent; right: -20px; -webkit-transition: border-right .25s ease-in-out; top: -28px; z-index: -15656567650; } </code></pre> <p><strong>Live example here:http://jsfiddle.net/VhGBv/</strong></p> <p>As you can see, when I put the mouse on the gray box, the backgound and the font color changing <em>not at the same time</em>. My qusation is: How can I timing the animation so when I put the mouse on the gray sentense the arrow and the gray box will change their color at the <em>same time</em> (together)? </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USNave Tseva
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COThe timing function on your triangle is `ease-in-out` but for the "put mouse here" transition, you are using `ease-in`. Let those be the same and it will work for you.
      singulars
      1. POtiming the animation in css3
      1. USShmiddty
    2. COThank you very much!
      singulars
      1. POtiming the animation in css3
      1. USNave Tseva
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload