title: Button hover transition duration
body: <p>I've been working on a small project in PyQt5 for a little while and I wanted to try and make it look a little better using the style sheet. For testing I copied <a href="https://www.w3schools.com/csS/tryit.asp?filename=trycss_buttons_hover" rel="nofollow noreferrer">an example from W3Schools</a> into a new project just to see if it would work. The example is a button where the background fades from white to green. Everything works except instead of fading, the transition happens instantly. My questions is how can I get that fade effect? I'm also curious how I can get that same sort of transition effect but with other aspects of the button such as size or shape.</p>
  
  <p>I've done a lot of searching but everything relevant that I've found is a little out of my scope of knowledge. What I do know is that I will probably have to code it in instead of using the style sheet, but I'm not exactly sure how to do that. I was thinking I could make a function to constantly change the color but I also think that there's probably a better way to do this.</p>
  
  <p>This is the code that is generated when I convert the .ui file.</p>
  
  <pre><code>from PyQt5 import QtCore, QtGui, QtWidgets
  
  
  class Ui_Dialog(object):
      def setupUi(self, Dialog):
          Dialog.setObjectName("Dialog")
          Dialog.resize(400, 300)
          self.pushButton = QtWidgets.QPushButton(Dialog)
          self.pushButton.setGeometry(QtCore.QRect(10, 10, 381, 281))
          self.pushButton.setMouseTracking(False)
          self.pushButton.setAutoFillBackground(False)
          self.pushButton.setStyleSheet(".QPushButton{\n"
  "background-color: #4CAF50;\n"
  "border: none;\n"
  "color: white;\n"
  "padding: 16px 32px;\n"
  "text-align: center;\n"
  "text-decoration: none;\n"
  "display: inline-block;\n"
  "font-size: 16px;\n"
  "margin: 4px 2px;\n"
  "transition-duration: 0.4s;\n"
  "cursor: pointer;\n"
  "}\n"
  "\n"
  "#pushButton{\n"
  "background-color: white;\n"
  "color: black;\n"
  "border: 2px solid #4CAF50;\n"
  "}\n"
  "\n"
  "#pushButton:hover{\n"
  "background-color: #4CAF50;\n"
  "color: white;\n"
  "}")
          self.pushButton.setObjectName("pushButton")
  
          self.retranslateUi(Dialog)
          QtCore.QMetaObject.connectSlotsByName(Dialog)
  
      def retranslateUi(self, Dialog):
          _translate = QtCore.QCoreApplication.translate
          Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
          self.pushButton.setText(_translate("Dialog", "Click Here"))
  
  
  if __name__ == "__main__":
      import sys
      app = QtWidgets.QApplication(sys.argv)
      Dialog = QtWidgets.QDialog()
      ui = Ui_Dialog()
      ui.setupUi(Dialog)
      Dialog.show()
      sys.exit(app.exec_())
  </code></pre>
  
  <p>This is what is in the style sheet but more readable.</p>
  
  <pre><code>.QPushButton{
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  }
  
  #pushButton{
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
  }
  
  #pushButton:hover{
  background-color: #4CAF50;
  color: white;
  }
  </code></pre>
  
  <p>Here is a picture of the button.</p>
  
  <p>Before hovering</p>
  
  <p><img src="https://i.stack.imgur.com/8zvxh.png" alt=""> </p>
  
  <p>and after</p>
  
  <p><img src="https://i.stack.imgur.com/aqX2l.png" alt=""></p>