css - How to stop css3 animation at the end? -

-

im playing around css3 translatey , i'm not abel stop animation @ end.

html:

<ul id="nav" class="nav-ctn">     <li><a href="?type=about">about</a></li>     <li><a href="?type=projects">projects</a></li>     <li><a href="?type=media">media</a></li>     <li><a href="?type=schedule">schedule</a></li>     <li><a href="?type=contact">contact</a></li> </ul>

css:

    .tr-up {         -moz-animation: tr-up 0.5s ease-in-out;         -o-animation: tr-up 0.5s ease-in-out;         -webkit-animation: tr-up 0.5s ease-in-out;         animation: tr-up 0.5s ease-in-out;         -moz-animation-fill-mode: forwards;         -o-animation-fill-mode: forwards;         -webkit-animation-fill-mode: forwards;         animation-fill-mode: forwards;     }       @-moz-keyframes tr-up {         {             -moz-transform: translatey(0);             -ms-transform: translatey(0);             -o-transform: translatey(0);             -webkit-transform: translatey(0);             transform: translatey(0);         }          {             -moz-transform: translatey(-3px);             -ms-transform: translatey(-3px);             -o-transform: translatey(-3px);             -webkit-transform: translatey(-3px);             transform: translatey(-3px);         }     }      @-webkit-keyframes tr-up {         {             -moz-transform: translatey(0);             -ms-transform: translatey(0);             -o-transform: translatey(0);             -webkit-transform: translatey(0);             transform: translatey(0);         }          {             -moz-transform: translatey(-3px);             -ms-transform: translatey(-3px);             -o-transform: translatey(-3px);             -webkit-transform: translatey(-3px);             transform: translatey(-3px);         }     }      @keyframes tr-up {         {             -moz-transform: translatey(0);             -ms-transform: translatey(0);             -o-transform: translatey(0);             -webkit-transform: translatey(0);             transform: translatey(0);         }          {             -moz-transform: translatey(-3px);             -ms-transform: translatey(-3px);             -o-transform: translatey(-3px);             -webkit-transform: translatey(-3px);             transform: translatey(-3px);         }     }

so far have tried solution form following posts:

stopping css3 keyframes animation

stop css3 animation jumping

animation stop css3

stopping css3 animation on last frame

but non of them worked me. doing wrong?

heres fiddle

note: tr-up class dynamically added link characters.

animations shouldn't work on inline elements need change default display property of <span> tags span{display:inline-block;} :

if want keep underline on menu items, need add text-decoration:underline; span tags :

demo


Comments

Post a Comment

Popular posts from this blog

java - Unable to make sub reports with Jasper -

-
i using jaspersoft studio create reports. having sub report in jasper main report. problem unable make work, because if add sub report detail band of main report, sub report generated number of times, row row, entire sub report repeated in number of pages. can't put in summery band due same reason. i unable put in column footer band or other footers because displays below error net.sf.jasperreports.engine.jrexception: net.sf.jasperreports.engine.jrruntimeexception: subreport overflowed on band not support overflow. @ com.jaspersoft.studio.editor.preview.view.control.reportcontroler.fillreport(reportcontroler.java:467) @ com.jaspersoft.studio.editor.preview.view.control.reportcontroler.access$18(reportcontroler.java:442) @ com.jaspersoft.studio.editor.preview.view.control.reportcontroler$4.run(reportcontroler.java:334) @ org.eclipse.core.internal.jobs.worker.run(worker.java:54) caused by: net.sf.jasperreports.engine.jrruntimeexception: subreport overflowe...
Read more

sql - The object name contains more than the maximum number of prefixes. The maximum is 2 -

-
i facing similar issue many others error message "the object name contains more maximum number of prefixes. maximum 2." my scenario is, create procedure dbo.[usp_procedure] begin declare @loadtime datetme2(7) set @loadtime = (select loadtime [linkedservername].[databasename].[schemaname].[tablename] tablename = 'xxxxxx') insert [currentserver].[schemaname].[tablename] select column1, column2, .... tablename join tablename1 on .... ... ... end the table containing loadtime present in linked server/database , important value utilized further in clause of procedure via @loadtime . query select loadtime .... works fine when try on present server individually. when run part of procedure, procedure fails above mentioned error. linked server connection set , working fine. , procedure needs run on present server, removes scope of creating procedure on linked server. hope scenario articulate. replies welcome. in advance. the line : insert [currentser...
Read more

scala - play framework: Modules were resolved with conflicting cross-version suffixes -

-
i want use elastic search play framework followed this guide here build.sbt file name := """es-with-play""" version := "1.0-snapshot" lazy val root = (project in file(".")).enableplugins(playscala) scalaversion := "2.11.1" librarydependencies ++= seq( jdbc, anorm, cache, ws, "com.clever-age" % "play2-elasticsearch" % "1.4-snapshot" ) resolvers += "sonatype oss snapshots" @ "https://oss.sonatype.org/content/repositories/snapshots" and in play console when compile code gives following errors [error] modules resolved conflicting cross-version suffixes in {file:/media/sara/new%20volume/programs/programs/play/es-with-play/}root: [error] com.jsuereth:scala-arm _2.11, _2.10 [error] com.typesafe.play:play-functional _2.11, _2.10 [error] com.typesafe.akka:akka-actor _2.11, _2.10 [error] com.typesafe.play:play-json _2.11, _2.10 [error] com.type...
Read more