CSS Transitions working when inside CSS editor, but not on the actual website

  • andreasimunic · Member ·

    Hello,

    Today I tried editing my website with CSS (the only reason I bought Premium acc). What I did in wordpress was editing transitions properties:

    transition: all .6s ease-out 0s;
    -webkit-transition: all .6s ease-out 0s;
    -moz-transition: all .6s ease-out 0s;

    They do work while I’m in the CSS editor and all seems fine. But once I save this CSS configuration and try opening my http://www.squaremileofstyle.com there are no transitions working. So I head back to my CSS editor and find the following:

    transition: all .6s ease-out 0;
    -webkit-transition: all .6s ease-out 0;
    -moz-transition: all .6s ease-out 0;

    If you notice, CSS editor erased ‘s’ as a ‘second (in time)’ from the last 0. It was supposed to be ‘0s’ and not ‘0’. Please let me know how this can be fixed so I could have proper and modern blog :)

    Thanks in advance,
    Andrea

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi Andrea, I’m not seeing that CSS in your custom CSS. We would need to know what HTML element you wish to apply that to in order to figure out why it is not working.

  • onetimepad · Member ·

    what browser are you using? I ask because my text entry regarding a css/ html dropcap is being re-written when I’m using Safari….? not problem for years ….but now.

  • thesacredpath · Member ·

    @onetimepad, this thread is about the Sela theme and I don’t see a site associated with your username using Sela. Can you give us a link to the site you are talking about?

  • andreasimunic · Member ·

    Hello,

    This is my custom CSS before I click “Save & Publish”:

    #text-7 > .textwidget {
	text-align: center;
}

#blog_subscription-3 > #subscribe-blog {
	text-align: center;
}

.widget_wpcom_social_media_icons_widget .genericon {
	font-size: 2.5em;
	overflow: hidden;
	white-space: nowrap;
}

#wpcom_social_media_icons_widget-2 {
	text-align: center;
}

#text-5 > .textwidget {
	text-align: center;
}

#secondary > aside {
	margin: 0 0 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}

.site-branding a + .site-title {
	margin-top: 0;
}

.site-branding, .site-navigation {
	padding-top: 20px;
}

.site-title > a {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.wf-active .site-description {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.site-branding {
	background-color: #fff;
}

body {
	background-color: #fff;
}

.site-logo {
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
}

.site-logo:hover {
	opacity: .7;
}

.widget_author_grid > ul > li {
	text-align: center;
}

.widget_author_grid .avatar {
	margin: auto;
}

.entry-meta {
	text-align: center;
}

.entry-content {
	text-align: justify;
}

.entry-title {
	text-align: center;
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
}

.entry-title:hover {
	background-color: rgba(128,203,189,0.1);
}

.entry-title > a {
	color: #d77e91;
}

.entry-title:hover > a {
	color: rgba(164,218,208,1);
}

.entry-meta > span {
	padding: 5px 8px;
	margin-right: 2px;
}

.entry-meta > span > a {
	text-align: center;
	margin-right: ;
	color: #000;
	background-color: rgba(116,204,209,0.2);
	border-radius: 3px;
	padding: 5px 8px;
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
	overflow: hidden;
	white-space: nowrap;
}

.entry-meta > span > a:hover {
	color: #fff;
	background-color: rgba(116,204,209,0.6);
}

.main-navigation, button {
	background-color: #80cbbd;
}

    And this is what I get when I click “Save & Publish”, close the editor and open it again (this is also what is put on the actual website on http://www.squaremileofstyle.com):

    #text-7 > .textwidget {
	text-align: center;
}

#blog_subscription-3 > #subscribe-blog {
	text-align: center;
}

.widget_wpcom_social_media_icons_widget .genericon {
	font-size: 2.5em;
	overflow: hidden;
	white-space: nowrap;
}

#wpcom_social_media_icons_widget-2 {
	text-align: center;
}

#text-5 > .textwidget {
	text-align: center;
}

#secondary > aside {
	margin: 0 0 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid rgba(0,0,0,0.3);
}

.site-branding a + .site-title {
	margin-top: 0;
}

.site-branding, .site-navigation {
	padding-top: 20px;
}

.site-title > a {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.wf-active .site-description {
	color: #000;
	font-weight: 300;
	text-shadow: 1px 1px #fff;
}

.site-branding {
	background-color: #fff;
}

body {
	background-color: #fff;
}

.site-logo {
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}

.site-logo:hover {
	opacity: .7;
}

.widget_author_grid > ul > li {
	text-align: center;
}

.widget_author_grid .avatar {
	margin: auto;
}

.entry-meta {
	text-align: center;
}

.entry-content {
	text-align: justify;
}

.entry-title {
	text-align: center;
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}

.entry-title:hover {
	background-color: rgba(128,203,189,0.1);
}

.entry-title > a {
	color: #d77e91;
}

.entry-title:hover > a {
	color: rgba(164,218,208,1);
}

.entry-meta > span {
	padding: 5px 8px;
	margin-right: 2px;
}

.entry-meta > span > a {
	text-align: center;
	margin-right: ;
	color: #000;
	background-color: rgba(116,204,209,0.2);
	border-radius: 3px;
	padding: 5px 8px;
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
	overflow: hidden;
	white-space: nowrap;
}

.entry-meta > span > a:hover {
	color: #fff;
	background-color: rgba(116,204,209,0.6);
}

.main-navigation, button {
	background-color: #80cbbd;
}

    Notice how CSS transitions are edited in the way they cannot work

  • thesacredpath · Member ·

    I’ve compared the two blocks of code you have above, and the only thing I see is that on the ease-out, the value is changed to 0 instead of 0s, which is normal with CSS. Example, on margins and paddings, 0 instead of 0px.

    If I’ve missed something in my review, perhaps let’s take one specific CSS rule as an example and I’ll see if I can figure out what is happening.

  • andreasimunic · Member ·

    You can take for example the logo itself. But why would then transitions work before I click “Save & Publish” and close the CSS editor?

    .site-logo {
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}
  • andreasimunic · Member ·

    Also, you can try opening Google Developer tools and you will find out that transitions do not work without specifying the measure unit (in this case “s” for “second”). Try it out yourself:

    Open Developer Tools > Console > s2.wp.com > custom.css > chane .site-logo to have “s” after all 0 and you will see the transition once you hover over the logo :)
    Here is the link to it: https://s2.wp.com/?custom-css=1&csblog=6s865&cscache=6&csrev=34

  • thesacredpath · Member ·

    In the CSS rule you give above, there aren’t any style declarations for the transition to work on. Something like the following would work and transition a blue background for the site logo. 

    .site-logo {
	background-color: blue;
	transition:all .6s ease-out 0;
	-webkit-transition:all .6s ease-out 0;
	-moz-transition:all .6s ease-out 0
}
  • thesacredpath · Member ·

    The above rule works for me in Google Developer and turns the background blue on the site logo.

  • andreasimunic · Member ·

    The next thing after .site-logo is .site-logo:hover which specifies that I want the opacity of the logo to be 0.7 on hover (you could’ve realized that if you hovered over the logo and saw that there is no transition, which is why I added transition). I have no idea what is going on. So once again I’ll rewrite the story:

    I want the logo to have opacity 0.7 when I hover it, but with transition, so it has a smooth animation.

    The CSS code that works for that is:

    .site-logo {
	transition: all .6s ease-out 0s;
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
}

.site-logo:hover {
	opacity: .7;
}

    But when I click “Save & Publish” in CSS editor, the editor edits the code in the following way:

    .site-logo {
	transition: all .6s ease-out 0;
	-webkit-transition: all .6s ease-out 0;
	-moz-transition: all .6s ease-out 0;
}

.site-logo:hover {
	opacity: .7;
}

    Which cannot work as the measure unit in transitions have to be defined (in this case “s” for “second” on all the 0 in the transition code).

    The blue background that permanently stands behind the logo has nothing to do with this issue and is not at all related to the transitions.

    If you think that my code is incorrect for what I’m trying to achieve (even though it works just fine everywhere except in the case of saving and publishing the CSS code in WordPress CSS editor), please let me know how I can achieve this in any other way :)

  • andreasimunic · Member ·

    I have found a way around this problem by changing the “0s” to any other number (example “0.2s”) or either erasing “0s” completely, then everything works, but this ISSUE IS NOT RESOLVED! You really should pay attention to these things as your CSS editor is obviously making changes to the CSS code that is being written by users. Also, I’m truly sorry, but I think more compenent people should work here and test these things. It is almost hillarious that a person who works here as a “Happiness Engineer” has no clue about CSS transitions and is trying to resolve issues on CSS forum….remarkable :)

  • The topic ‘CSS Transitions working when inside CSS editor, but not on the actual website’ is closed to new replies.