animation - Trying to get a css3 hover off transition working with my code -


When I close the cursor of the images, what should I do to roll back icons? Currently they roll when they move, but when I leave them, I wanted to roll them back to their initial position. Any thoughts?

& lt; Head & gt; & Lt; Style & gt; UL # Roller & gt; Lee (float: left; Padding: 20px; Border-radius: 60px; Width: 80px; Height: 80px; Margin-left: 10px; Margin-top: 90px; } Ul # roller & gt; li: nth-child (1) {background: url ('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/1.png') No repetition in the center center ; } Ul # roller & gt; li: nth-child (2) {background: url ('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/2.png') No repetition in the center center ; } Ul # roller & gt; li: nth-child (3) {background: url ('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/3.png') No repetition in the center center ; } Ul # roller & gt; li: nth-child (4) {background: url ('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/4.png') center center no repetition; } Ul # roller & gt; li: nth-child (5) {background: url ('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/5.png') Not Center Center-Repeat; } UL # Roller: Hover Lee {Animation: Rotate 2s; Webkit-Animation: Rotate 2s; } Ul # roller: hinge {margin-left: 100px; } #roller {Infection: All 2s Easy-In-Out; -Widk-Infection: All 2s Easy-In-Out; Height: 400 pixels; } #shelf {background: url ('http://praxis.cit.ie/~josephwinfield/wordpress/wp-content/themes/jaywin/img/shelf.jpg') There is no duplication in the center center; Background-size: 900px; } @ Keyframe rotate {0% {translate (0px, 0px;)} 100% {conversion: rotate (360 degree) translation (0 pixels, 0 pixels); }} @ -WebKit-Keyframe Rotate {0% {translation (0 px, 0 px;)} 100% {-webkit-transform: rotate (360 degree) translation (0 px, 0 px); }} & Lt; / Style & gt; & Lt; Script & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; div id = "shelf" & gt; & Lt; ul id = "roller" & gt; & Lt; Li id = "# roller" & gt; & Lt; / li & gt; & Lt; Li id = "# roller" & gt; & Lt; / li & gt; & Lt; Li id = "# roller" & gt; & Lt; / li & gt; & Lt; li id ​​= "# roller" & gt; & Lt; / li & gt; & Lt; li id ​​= "# roller" & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;

Animation defined only in : hover position is . You need to define reverse animation for the default position. Use the animation-direction: reverse

Another option is to use a transition to add the appropriate prefix. 

  ul # roller li {Infection: 2s conversion; } UL # Roller: Hover Lee (Transcam: Rotate (360 degrees); }

Comments

Post a Comment

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

I get the error every time, I try to compile. I'm not sure why anyone can help is? I'm new to verilog. Module D_FF (clerk, d, reset_n, q); Input D, Clack, reset_en; Output Q; reg Q; lab4_gdl f1 (.lk (~ clk), d (d), .q.m (qm)); lab4_GDL f2 (.Clk (Clk), D (QM), .Q (Q)); Always start at @ (posedge clk, neggeous reset_n) (Reset_n == 0) Q & lt; = 0; Other questions & lt; = D; Edit End: The problem is what we are asking to do: In this section, you apply the memory / registration circuit on the AlterEdie 2 board. will do. The circuit has the following specifications: The present value of swift SW15-0 on the D2 board should be shown in four hexadecimal four sections of HEX3-0. This part of the circuit will be combination logic. To use an active-less asynchronous reset and KEY1 to use KEY0 as the clock input, you must store SW15-0in in a 16-bit register in the value The register should be enabled to have a 16-bit positive edge, which uses the embedded D flip-flo
Read more

jasper reports - How to center align barcode using jasperreports and barcode4j -

I use iReport 5.5.0 . How to align a barcode component to the center The relevant piece of my jrxml is below & Lt; JR: Code 128 xmlns: JR = "http://jasperreports.sourceforge.net/jasperreports/components" xsi: schemaLocation = "http://jasperreports.sourceforge.net/jasperreports/components http: //jasperreports.sourceforge Purge / xsd / components.xsd "textPosition =" bottom "& gt; & Lt; Jr: codeExpression & gt; & Lt; [CDATA [$ F {number}]] & gt; & Lt; / Jr: codeExpression & gt; & Lt; / Jr: Code 128 & gt; & Lt; / componentElement & gt; "Text" itemprop = "text"> Create a style after this, it is called "barcode", like: & lt; Style name = "barcode" fontName = "Helvetica" fONTSIZE = "10" hAlign = "center" valign = "center" /> and set the property of your barcode element to "barcode".
Read more

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -

In brief, the wrapper module is inserted during posting and the status of an entry is changed to 'modified' . Before changing the state, the state is set to 'separate', but calling attachments () causes the same error to be thrown away. I am using EF 6. Model / wrapper class public class avi model {public A is a {get; Set; } Public listing & lt; B & gt; B {received; Set; } Public cc {receipt; Set; }} Administrator edit public functioning (int? id) {if (id == null) {new HttpStatusCodeResult (HttpStatusCode.BadRequest); } If (! Conveyor Access (id.Value)) new HTTPTitus code result (HTTP status code. Forbidden); Var aViewModel = new AViewModel (); aViewModel.A = db.As.Find (id); If (aViewModel.Receipt == zero) {return HttpNotFound (); } aViewModel.b = db.Bs.Where (x => x.aid == id.Value) .Oolist (); AViewModel.Vendor = db.Cs.Where (x => x.cid == aViewModel.a.cID) .FirstOrDefault (); See Return (aViewModel); } [HTPFost] [Valid AntitiferousTeacon
Read more