I'm switching from a collapsible object to another one since the latter has better features but, as a drawback, it seems harder to style.
I'd like to style the new transition animation as the old one.
Here you can see the code of the two buttons: demo and snippet
var coll = document.getElementsByClassName("oldcol");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.oldcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s;
}
.oldcon {
padding: 0 18px;
margin: 3px 0;
max-height: 0;
overflow: hidden;
transition: .3s ease-out;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.container {
position: relative;
margin: 0em;
}
.newcon {
display: none;
padding: 0.6em;
margin: 0.5em;
background: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.newcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s ease-out;
}
.newcol:focus {
pointer-events: none;
margin-bottom: 3em;
}
.newcol:focus + .newcon
{
display: block;
margin-top: -2.5em;
position: absolute;
left: 0;
right: 0;
}
.fadein {
animation: fadein 1s;
}
#keyframes fadein {
from {opacity:0}
to {opacity:1}
}
Old button: does <button class="oldcol">this</button> work?
<div class="oldcon"><p>Yes!<p/></div>
<hr>
<div class=container>
New button: does <button class="newcol">this</button><span class=newcon>Quite good</span> work?<br>
New button fadein: does <button class="newcol">this</button><span class="newcon fadein">Quite good</span> work?<br>
</div>
What I've tried so far
put transition: all 3s; in the newcon css (doesn't work)
added the following classes to span (and writing <span class="newcon visible hidden"> in the html)(doesn't work)
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.newcon.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
added the following class to span which let fade in the content, it works but I don't know how to do the same for the fade out effect. I think the problem is that to close the button it is not needed to click on it, but it is enough to click everywhere (this is not a good behaviour, how to fix it?).
.fadein {
animation: fadein 1s;
}
#keyframes fadein {
from {opacity:0}
to {opacity:1}
}
There are easy implementations
of the expand/collapse transition, such as the first answer to How can I transition height: 0; to height: auto; using CSS?, but I don't uderstand how to apply it in my case.
Here's a working version with the line-height transition that I proposed in the comments.
.container {
width: 250px;
}
.col {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
}
.con {
display: block;
padding: 0 18px;
margin: 3px 0;
overflow: hidden;
transition: all .3s ease-out;
line-height: 0em;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.col:focus {
color: red;
}
.col:focus + .con
{
line-height: 1.2em;
padding: 8px 18px;
margin: 10px 0;
}
<div class="container">
This should work
<button class="col">right?</button>
<span class="con">Yes absolutely, but only with text!</span>
And it should also be responsive.
</div>
Related
I currently have a sidebar that looks like: this
This is the HTML code for it:
<div id="sidebar">
➕
<a class="active" href="#">🏠</a>
🙋♂️
🔧
🚪
</div>
Now I want to add a button to make the bar bigger, and also display text using below code:
Using onclick="openNav()" I have found this way:
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
If I hardcode in the text like this: ➕ New user, the text will also show when the bar is minimized, as in the first picture. But how can I only display the text if the bar is 250px?
This is my current sidebar CSS settings:
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
letter-spacing: 1px;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
Hope this helps, any questions I will be happy to answer :)
function openNav() {
// document.getElementById("sidebar").style.width = "250px";
// OR YOU CAN
document.getElementById("sidebar").classList.toggle("open");
}
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
letter-spacing: 1px;
}
#sidebar a span {
display: none;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
.open {
width:250px !important;
}
.open span {
display: inline !important;
}
<div id="sidebar">
➕<span> New user</span>
<a class="active" href="#">🏠<span> New user</span></a>
🙋♂️ <span> New user</span>
🔧<span> New user</span>
🚪<span> New user</span>
<button onclick="openNav()">Click</button>
</div>
I changed some style of #sidebar a
#sidebar a {
white-space: nowrap;
padding-left: 25px;
overflow: hidden;
transition: all 600ms ease;
}
For align the text in single line by adding white-space: nowrap;
overflow: hidden; // For hide overflow content
transition: all 600ms ease; // make animation smooth
function openNav(btn) {
btn.classList.toggle("active");
if(btn.classList.contains("active")){
btn.textContent = "x";
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}else{
btn.textContent = "☰";
document.getElementById("sidebar").style.width = "60px";
document.getElementById("main").style.marginLeft= "60px";
}
}
#main {
transition: margin-left .5s;
margin-left:60px;
transition: all 600ms ease;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
transition: all 600ms ease;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
white-space: nowrap;
padding-left: 25px;
word-spacing: 15px;
overflow: hidden;
transition: all 600ms ease;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
<div id="sidebar">
➕ New User
<a class="active" href="#">🏠 Home</a>
🙋♂️ Hello
🔧 Settings
🚪 Mobile
</div>
<div id="main">
<button class="openbtn" onclick="openNav(this)">☰</button>
</div>
With My Demo :)
function openNav() {
document.getElementById("sidebar").classList.toggle("big");
}
#sidebar{
border:1px solid #ccc;
width:50px;
transition: all 600ms ease;
}
#sidebar a{
display:block;
background:#fff;
padding:15px 20px;
text-decoration:none;
white-space: nowrap;
overflow:hidden;
word-spacing: 10px;
transition: all 600ms ease;
}
#sidebar a.active{background:#e6e6e6;}
#sidebar.big{
width:200px;
}
<button onclick="openNav()">SIDEBAR</button>
<div id="sidebar">
➕ New User
<a class="active" href="#">🏠 Home</a>
🙋♂️ Hello
🔧 Settings
🚪 Mobile
</div>
I have a fixed red button which shows some info on click.On hovering the button, a small info shows up.Click and hover both are working on a same button.I have 2 problem scenario doing this thing -
Problem 1 - When I mouse hover on the red button DummyText div comes up and hides in 2-3 second ,that is working fine as I want .But when I remove the mouse from button i.e mouse out the DummyText hides quickly but I want it to hide out in 2-3 seconds only.
Problem 2- When I click the red button the divs on right open up, Now I want hover event to stop working in all cases.
Below is the code of what I have tried. Hope Someone has a better solution on this.
Thanks in Advance!
$('.FilIcon').click(function() {
$('.ConservativeLikelyBox').toggle(100);
setTimeout(function() {
$('.hoverLikely').toggleClass('showMeNot');
}, 100);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ConservativeLikely");
if (container.has(e.target).length === 0) {
$('.ConservativeLikelyBox').hide(100);
$('.hoverLikely').removeClass('showMeNot');
}
});
ul,
li {
margin: 0px;
padding: 0px;
list-style: none
}
.ConservativeLikely {
position: fixed;
right: 0px;
top: 30%;
}
.FilIcon {
float: left;
width: 40px;
height: 40px;
background: red;
}
.DefineScopeForBC .ActButtonNew1 span {
background: #fff;
border: 2px solid rgb(15, 170, 255);
}
.ConservativeLikely img {
position: relative;
top: 5px;
left: 5px;
}
.ConservativeLikelyBox {
width: 100px;
display: none;
height: auto;
border: 1px solid rgb(15, 170, 255);
float: left;
}
.ConservativeLikelyBox li {
float: left;
width: 100%;
text-align: left
}
.ConservativeLikelyBox li a {
padding: 5px 10px;
display: block;
}
.ConservativeLikelyBox li.active a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:hover a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:first-child a {
border-bottom: 1px solid rgb(15, 170, 255)
}
.hoverLikely {
position: absolute;
right: 42px;
top: 47px;
width: auto;
background: #fff;
color: #000;
padding: 2px 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
}
.ConservativeLikely:hover>.hoverLikely {
animation-name: ShowHideNew;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-duration: 2s;
}
.ConservativeLikely:hover>.hoverLikely.showMeNot {
opacity: 0;
display: none;
}
#keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#-webkit-keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#-moz-keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ConservativeLikely">
<span class="hoverLikely">DummyText</span>
<div class="FilIcon"><img src="../../../images/cons_lik.png" width="30" /></div>
<div class="ConservativeLikelyBox">
<ul>
<li class="active"> Lorem</li>
<li> Ipsum</li>
</ul>
</div>
</div>
Problem 1 can be solved with just CSS. Here is a working demo.
HTML
<div class="box show-pop-up">
<div class="pop-up">this is popup</div>
</div>
CSS
.box {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.pop-up {
outline: 1px solid yellow;
background: white;
position: absolute;
right: -20px;
bottom: 10px;
opacity: 0;
transition: opacity 1s step-end;
}
.show-pop-up:hover > .pop-up {
transition-duration: 0s;
opacity: 1;
}
The basic idea is to have nonzero transition-duration on our pop up element and set transition-duration to 0s on hover, so the pop up shows up immediately. But when we remove the mouse, the 'original' duration kicks in so the pop up stays for the animation duration. And since transition-timing-function is specified as step-end, the pop up opacity goes from 1 to 0 at the end of animation.
Now the problem 2 is trivial. Since we can just toggle the show-pop-up class with javascript.
EDIT:
As suggested by Adam K. transition-delay can be added, which enables us to add pop up fading animation. demo
Transition and transition delay can be used
.elem{
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
transition-delay:1s;
}
.elem:hover{
opacity: 1;
visibility: visible;
transition: opacity 0, visibility 0;
transition-delay: 0;
}
This makes exiting hover delayed.
$('.FilIcon').click(function() {
$('.ConservativeLikelyBox').toggle(100);
setTimeout(function() {
$('.hoverLikely').toggleClass('showMeNot');
}, 100);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ConservativeLikely");
if (container.has(e.target).length === 0) {
$('.ConservativeLikelyBox').hide(100);
$('.hoverLikely').removeClass('showMeNot');
}
});
ul,
li {
margin: 0px;
padding: 0px;
list-style: none
}
.ConservativeLikely {
position: fixed;
right: 0px;
top: 30%;
}
.FilIcon {
float: left;
width: 40px;
height: 40px;
background: red;
}
.DefineScopeForBC .ActButtonNew1 span {
background: #fff;
border: 2px solid rgb(15, 170, 255);
}
.ConservativeLikely img {
position: relative;
top: 5px;
left: 5px;
}
.ConservativeLikelyBox {
width: 100px;
display: none;
height: auto;
border: 1px solid rgb(15, 170, 255);
float: left;
}
.ConservativeLikelyBox li {
float: left;
width: 100%;
text-align: left
}
.ConservativeLikelyBox li a {
padding: 5px 10px;
display: block;
}
.ConservativeLikelyBox li.active a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:hover a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:first-child a {
border-bottom: 1px solid rgb(15, 170, 255)
}
.hoverLikely {
position: absolute;
right: 42px;
top: 47px;
width: auto;
background: #fff;
color: #000;
padding: 2px 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
transition-delay:1s;
}
.ConservativeLikely:hover>.hoverLikely {
animation: hide 1s forwards;
animation-delay:1s;
animation-iteration-count: 1;
animation-timing-function: linear;
transition: opacity 0s;
transition-delay: 0;
opacity: 1;
visibility: visible;
}
.ConservativeLikely:hover>.hoverLikely.showMeNot {
opacity: 0;
display: none;
}
#keyframes hide {
0% {opacity:1;visibility: visible;}
100% {opacity:0;visibility: hidden;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ConservativeLikely">
<span class="hoverLikely">DummyText</span>
<div class="FilIcon"><img src="../../../images/cons_lik.png" width="30" /></div>
<div class="ConservativeLikelyBox">
<ul>
<li class="active"> Lorem</li>
<li> Ipsum</li>
</ul>
</div>
</div>
I'm trying to centre an absolute positioned drop down menu below the parent div which is of unknown width. I've attempted to use margin-left, left, and transform with no luck.
How it looks versus how I want it to look
JSFiddle
HTML
<div id="heads">
<div class="contain">
<div id="heads-menu">
<div id="heads-menu-name">
<img src="../resources/profile-icon.svg" />
<div>John Smith</div>
</div>
<div id="heads-menu-nav">
<div></div>
View Profile
Options
Help
Close Session
</div>
</div>
</div>
</div>
CSS
#heads-menu {
float: left;
}
#heads-menu-name {
border-bottom: 2px solid transparent;
cursor: pointer;
padding: 22px 0 20px 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-name img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
float: left;
height: 26px;
margin-right: 10px;
width: 26px;
}
#heads-menu-name div {
color: #666;
float: left;
font: 600 normal normal 12px/16px Source Sans Pro, Arial, Helvetica, sans-serif;
margin: 5px 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-name:hover {
border-bottom: 2px solid #5098BB;
}
#heads-menu-name:hover div {
color: #5098BB;
}
#heads-menu-nav {
background: rgba(0,0,0,.8);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
overflow: visible;
padding: 5px 0;
position: absolute;
width: 140px;
}
#heads-menu-nav div {
border-bottom: 8px solid rgba(0,0,0,.8);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
height: 0;
margin: 0 62px;
position: absolute;
top: -8px;
width: 0;
}
#heads-menu-nav a {
color: #CCC;
font: 600 normal normal 12px/16px Source Sans Pro, Arial, Helvetica, sans-serif;
padding: 10px 20px;
text-decoration: none;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#heads-menu-nav a:hover {
background: rgba(255,255,255,.2);
color: #FFF;
}
You can try this :
$("#heads-menu-name").click(function(e) {
var linkWidth = $(this).width();
$("#heads-menu-nav").css('marginLeft', function() {
return '-' + (($(this).width()/2)-(linkWidth/2)) + 'px';
}).toggle();
e.stopPropagation();
});
Demo: https://jsfiddle.net/iRbouh/ataamc72/
I have a right sidebar.I'm using font awesome angle-left icon to show/hide the sidebar. On click of toggle button side bar pushes the content towards left along with the button & then button(font awesome left-angle) rotates 180 degrees to become (font awesome right-angle) as an animation. It is working fine till here. But when i scroll the page the toggle button is also getting scrolled vertically.
Here I don't want toggle button getting scrolled vertically every time.
I hv tried position: fixed in css by which vertical scrolling is stopped but the sidebar is not pushing the toggle button horizontally. The side bar is getting overlapped on the toggle button (only in firefox).
In chrome its working fine.The vertical scrolling is stopped & the sidebar is pushing the content to left side, but this is not happening in firefox.
css:
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-ms-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background-color: rgba(0, 0, 0, 0.3);
width: 240px;
height: 100%;
}
.content {
width: 100%;
height: 100%;
padding: 10px;
position: relative;
padding-left: 50px;
}
.content #sidebar-toggle {
background: transparent;
color: white;
opacity: 0.5;
border-radius: 1px;
display: block;
position: relative;
padding: 30px 7px;
float: right;
}
.padtop {
line-height: 600px;
color: white;
opacity: 0.5;
position: fixed;
}
.rotate {
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.rotate.side {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
html:
<div class="container">
<div class="col-sm-1">
<a href="#" data-toggle=".container" id="sidebar-toggle">
<i class="fa fa-angle-double-left fa-5x padtop rotate"></i></a>
</div>
</div>
Here is my o/p:
o/p in Firefox
o/p in Chrome
description and example demo for toggle effect..
Demo
HTML
<div class="toggle-button">
<button></button>
</div>
CSS
.toggle-button { background-color: white; margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button button { cursor: pointer; outline: 0; display:block; position: absolute; left: 0; top: 0; border-radius: 100%; width: 30px; height: 30px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: #83B152; border: 2px solid #7DA652; }
.toggle-button-selected button { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
Javascript
$(document).on('click', '.toggle-button', function() {
$(this).toggleClass('toggle-button-selected');
});
so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.